将活动类添加到导航链接，某些li除外

Add active class to nav links with exception for some li

本文关键字：某些 li 除外 链接 导航 活动 添加      更新时间：2023-09-26

我有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');
});

怎么了？希望我足够清楚。。。

您在划掉之前忘记了类标识符：

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

周期决定了一切。然后，因为您的页面上可能有其他几个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>

Jquery有一个切换类函数 
$("#td_id").toggleClass('default active');

相关的post-jquery更改类名

相关文章：