html li css選中狀態切換


思路:點擊當前li元素后是用removeClass()刪除所有兄弟元素(使用siblings()獲取)的class樣式,然后使用addClass()為當前li添加class。
具體演示如下:
1、HTML結構:設計三個li元素
<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');                            // 添加當前元素的樣式
    });
}); 

  


免責聲明!

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



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