jquery add a class to the Li tag after clicking on the Li tag and delete the previous Li's class when clicking on the next Li

Idea: After clicking on the current LI element, use Removeclass () to remove all sibling elements (using siblings () to get the class style, and then use AddClass () to add class to the current Li

This is illustrated below:

1. HTML structure: Design of three Li elements

<ul id= "Test" >    <li>Glen</li>    <li>Tane</li>    <li>John</li> </ul>

2, CSS style: Design a class selected, indicating the effect after selection

<style>    . Selected{font-weight:bold; background: #ff99cc;  Color:#fff;} </style>

3. jquery Code:

$ (function() {    $ ("#test li"). Click (function() {        $ (this). Siblings (' Li '). Removeclass (' selected ');  // Remove styles from other sibling elements         $ (this). AddClass (' selected ');                            // add a style for the current element    

jquery add a class to the Li tag after clicking on the Li tag and delete the previous Li's class when clicking on the next Li