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 change class name

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>

将活动类添加到导航链接，但有一些li的例外

3 个答案: