Question

我有一个导航列表设置来显示/隐藏标签，这些标签工作正常。我现在只在单击href的文本时尝试添加/删除导航项的活动类。当前单击列表项（文本周围的空间而不仅仅是文本）时，将显示活动类。因此，活动类显示时不会单击链接并更改选项卡。

我已经尝试了许多变体来实现这一点，没有结果。

<script>
  $(function(){
    $('#tabs li').click(function() {
    //Removes the active class from any <li> elements
    $('li.active').removeClass('active');
    //Adds it to the current element
    $(this).addClass('active');
    });
  }); 
</script>

HTML

<div class="warranty-nav">
  <ul id="tabs" class="nav">
    <li class="active"><a href="#overview">Overview</a></li>
    <li class=""><a href="#benefits">Plan Benefits</a></li>
    <li class=""><a href="#works">How It Works</a></li>
    <li class=""><a href="#terms">Terms and Conditions</a></li>
    <li class=""><a href="#faqs">Frequently Asked Questions</a></li>
  </ul>
</div>

提前致谢。

Answer 1

试试这个：

 $('#tabs a').click(function() {
     //Removes the active class from any <li> elements
    $('#tabs li.active').removeClass('active');
    //Adds it to the current element
    $(this).parent('li').addClass('active');
  });

Answer 2

  $(function(){
    $('#tabs li').click(function() {
    //Removes the active class from any <li> elements
    $(this).siblings().removeClass('active');
    //Adds it to the current element
    $(this).addClass('active');
});
  });

删除兄弟姐妹类

Answer 3

您的代码有效，您只需要关闭您的功能。

<script>
  $(function(){
    $('#tabs li').click(function() {
    //Removes the active class from any <li> elements
    $('li.active').removeClass('active');
    //Adds it to the current element
    $(this).addClass('active');
  })});
</script>

通过单击li中的href，使用jQuery添加/删除nav ul li的类

3 个答案: