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

Question

我有一个导航列表设置来显示/隐藏选项卡，它运行正常。我现在只在单击href的文本时尝试添加/删除nav ul li项目的活动类。当前，当您单击列表项（文本周围的空间，而不仅仅是文本）时，将显示活动类。因此，活动类在不单击链接和更改选项卡的情况下显示。

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

<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>