Question

我连续5个链接项，封装在h4内，li元素中的h4和ul中的li最终嵌套在nav元素中。

目前，点击时的角色（感谢我在这里找到一个非常有用的例子）是改变div的内容（包含图像和文本）。

我还想做的是，当您点击链接并更改内容时，我想要一个链接来接收“活动”类，它具有白色和某些其他css属性。

<script>      
  $(function() {
    $( "#tabs" ).tabs();
  }); 
</script>

交换内容的功能

<nav id="nav2">       
  <ul  class="tabz">
    <li><h4><a href="#tabs-1" class="active">Szenario 1</a></h4></li>
    <li><h4><a href="#tabs-2">Szenario 2</a></h4></li>
    <li><h4><a href="#tabs-3">Szenario 3</a></h4></li>
    <li><h4><a href="#tabs-4">Szenario 4</a></h4></li>
    <li><h4><a href="#tabs-5">Szenario 5</a></h4></li>
  </ul>
</nav>

页面加载后，所有内容都会正确显示。当我点击第二个链接时，我希望从第一个链接中删除“活动”类并转到秒。（活动类的css只是一些颜色和边界差异。）

非常感谢你。

Answer 1

使用带有选择器的anchor附加这些attribute starts代码的处理程序，因为您的href具有相同的开头。并且通过使用$(this)引用设置活动类并从其所有锚定兄弟中删除活动类。

尝试，

$('[href^="#tabs"]').click(function(){
      $(this).addClass('active');
      $(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});

Answer 2

$('[href^="#tabs"]').click(function(e){
    $(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});

使用您拥有的标记，点击的a元素将不会有任何兄弟，但其li父级将会这样，因此此代码将按预期工作，请参阅此处：DEMO

在nav ul li h4中使用jQuery添加/删除链接的类

2 个答案: