將活動類添加到導航鏈接，某些鋰電池例外

Question

我有ul.menu ，其中幾個li的樣式不同，因此這些li不需要添加活動類。

<ul class="menu">
   <li id="1st" class="default"><a href="#">Text1</a></li>
   <li id="2nd" class="default"><a href="#">Text2</a></li>
   <li class="cross-out"><a href="#">Text3</a></li>
</ul>

jQuery為前兩個鏈接添加活動類，但li.cross-out除外

$('ul.menu li').click(function(){
    $('ul.menu li').removeClass('active');
    $(this).not('cross-out').addClass('active');
});

怎么了？ 希望我足夠清楚...

Answer 1

您在刪除之前忘記了類標識符：

$('ul.menu li').click(function(){
    $('ul.menu li').removeClass('active');
    $(this).not('.cross-out').addClass('active');
});

Answer 2

jQuery具有切換類功能

$("#td_id").toggleClass('default active');

相關帖子jquery更改類名稱

Answer 3

期間會有所不同。 然后，因為您的頁面上可能還有其他幾個ul.menu元素，所以只希望單擊其li進行更改的元素即可：

$('ul.menu li').click(function(){
    $(this).siblings('li.active').removeClass('active');
    $(this).not('.cross-out').addClass('active');
});

 $('ul.menu li').click(function(){ $(this).siblings('li.active').removeClass('active'); $(this).not('.cross-out').addClass('active'); }); 

 .active { background-color:gray; font-weight:bolder; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="default"><a href="#">Text1</a></li> <li class="default"><a href="#">Text2</a></li> <li class="cross-out"><a href="#">Text3</a></li> </ul> <ul class="menu"> <li class="default"><a href="#">Text1</a></li> <li class="default"><a href="#">Text2</a></li> <li class="cross-out"><a href="#">Text3</a></li> </ul> <ul class="menu"> <li class="default"><a href="#">Text1</a></li> <li class="default"><a href="#">Text2</a></li> <li class="cross-out"><a href="#">Text3</a></li> </ul>