jquery怎么在點擊li標簽之后添加一個在class,點擊下一個li時刪除上一個class?


思路:點擊當前li元素后是用removeClass()刪除所有兄弟元素(使用siblings()獲取)的class樣式,然后使用addClass()為當前li添加class。

具體演示如下:

1、HTML結構:設計三個li元素

1

2

3

4

5

6

7

8

9

<ul id="test">

 

    <li>Glen</li>

 

    <li>Tane</li>

 

    <li>John</li>

 

</ul>

  

2、css樣式:設計一個類selected,表示選中后的效果

<style>

    .selected{font-weight:bold; background: #ff99cc; color:#fff;}

</style>

 

3、jquery代碼:

復制代碼

$(function(){

    $("#test li").click(function() {

        $(this).siblings('li').removeClass('selected');  // 刪除其他兄弟元素的樣式

        $(this).addClass('selected');                            // 添加當前元素的樣式

    });

}); 

復制代碼

 

4、效果演示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM