Home >Web Front-end >Front-end Q&A >jquery implements color change of selected items

jquery implements color change of selected items

WBOYOriginal: 2023-05-12 11:55:061128browse

jQuery is a very popular JavaScript library that can simplify developers’ JavaScript programming and improve development efficiency. In web development, in order to provide a better user experience, we often need to make style changes to page elements. This article will introduce how jQuery implements the function of changing the color of selected items.

1. HTML structure

First, we need to add some list elements to HTML to demonstrate the effect of changing the color of the selected item. The following is a simple HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>选中项变颜色</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .selected {
            background-color: #f5f5dc;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>    
        <li>列表项3</li>    
        <li>列表项4</li>
    </ul>
</body>
</html>

A ul element is defined here, which contains four li elements. When the user clicks on one of the li elements, we set the element to the selected state and change its background color.

2. jQuery to realize the color change of the selected item

Next, we need to use jQuery to achieve the color change effect when the user clicks on the list item. The following are the specific steps:

Get all li elements through the jQuery selector and bind the click event to them.

$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});

For each clicked li element, we need to add a CSS class selected and remove all other list items selected Class.

$("#list li").click(function(){
    // 添加选中状态
    $(this).addClass('selected');
    // 移除其他元素的选中状态
    $(this).siblings().removeClass('selected');
});

Finally, add a style to the background color of the selected item:

.selected {
    background-color: #f5f5dc;
}

The complete jQuery code is as follows:

$(document).ready(function(){
    $("#list li").click(function(){
        // 添加选中状态
        $(this).addClass('selected');
        // 移除其他元素的选中状态
        $(this).siblings().removeClass('selected');
    });
});

三, Effect jquery implements color change of selected items

The final effect is shown in the figure below:

jquery implements color change of selected items

4. Summary

This article introduces how to use jQuery to achieve selection The function of item changing color. Through studying this article, you have learned how to access DOM elements, add and remove CSS classes, and update the page in real time through jQuery. I hope this article can help you learn jQuery and improve web development efficiency.

The above is the detailed content of jquery implements color change of selected items. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html 事件 dom 选择器 ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Which JavaScript book is better?Next article：Which JavaScript book is better?

See more

jquery implements color change of selected items

Related articles