jQuery onClick 导航选项卡 - 需要拉入正文内容

Question

所以我有一个页面，在页面顶部有 3 个选项卡，单击它们时需要应用样式元素。我已经使用 .toggleClass('active');函数，然后在 css 中设置“事件”类的样式。这个位很好，可以按我的需要工作。

然而，接下来我需要开始工作的是，对于每次选项卡点击，相关的内容选项卡都会显示在页面的内容正文中。

到目前为止，我已经有了这个。

   <ul>

        <li class="active">Primary</li>
        <li>Secondary</li>
        <li>Tertiary</li>

   </ul>

   <div class="tabs">

     <div class="slate">Content1</div>
     <div class="slate">Content2</div>
     <div class="slate">Content3</div>

   </div>

所以我需要在单击 li 时应用事件类(我有这个工作)，然后它还在“选项卡”容器 div 中显示相关 div 的内容。因此，如果在 ul 中单击主要内容 - 它会在选项卡 div 中显示来自第一个子项的内容。

谢谢

Answer 1

如果你可以控制你的 html 那么你可以在你的 li 元素上应用 ID，并且相同的 ID 值应该作为类名应用在选项卡内容上，这样你就可以获得 id 以定位到类名以进行切换:

$('li').click(function(){
  $(this).addClass('active').siblings('li').removeClass('active');
  $('.slate.'+this.id).show().siblings('.slate').hide();
});

li{list-style:none;}
.slate{display:none;}
.slate.active{display:block}
li.active{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li id='primary' class="active">Primary</li>
  <li id='secondary'>Secondary</li>
  <li id='tertiary'>Tertiary</li>

</ul>
<div class="tabs">

  <div class="slate primary active">Content1</div>
  <div class="slate secondary">Content2</div>
  <div class="slate tertiary">Content3</div>

</div>