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
});
});
4, Effect demonstration:
How does jquery add a class after clicking on the Li tag and deleting the previous class when clicking on the next Li?