jquery set li selected-Front-end Q&A-php.cn

jquery set li selected

WBOY

Release： 2023-05-12 11:06:36

Original

1014 people have browsed it

When using jQuery for page development, it is often necessary to set the selected state of a certain li element in the list. This setting is very important for some pages that require state switching. This article will explain how to set the li selected state using jQuery.

First of all, we need to be clear: to set the li selected state, we need to define a style and then apply the style to the required li element through jQuery. In this way, when we click on the li element to be selected, we can switch the selected state by adding or deleting the style.

The following is a code example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置li选中状态</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('ul li').click(function() {
                $('ul li').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</body>
</html>

Copy after login

The above code implements a simple option list and adds a style for the selected state. When we click on an option in the list, the selected state is switched through jQuery code.

Specifically, we use jQuery's click() method to listen to the click event of each li element, and then in the event handler function, first remove the selected style of all li elements in the list, and then The selected style is added to the currently clicked li element to switch the selected state.

Another thing to note is that we use the addClass() and removeClass() methods to add and delete CSS classes so that a certain CSS class can be predefined in the style sheet and then used in jQuery. name to control the style of the selected state.

In the actual development process, the selector can also be flexibly transformed and customized according to actual needs. For example, we can select the li element to be operated through various methods such as ID, attributes, tag names, etc. We can also handle more complex logic by combining custom attributes, data attributes, etc.

In short, it is very simple to use jQuery to set the li selected state. You only need to master some basic jQuery knowledge to implement components such as option lists that require state switching.

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