Question

所以我有一个页面顶部有3个选项卡的页面，当它们被点击时需要应用一个样式元素。我使用.toggleClass（＆＃39; active＆＃39;）完成了这项工作。功能，然后设置“活跃”的样式。 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时将它应用于活动的类（我有这个工作），然后它还会在＆＃39;选项卡中显示来自相关div的内容。容器div。因此，如果在ul中单击了primary，它将显示选项卡div中第一个子项的内容。

由于

Answer 1

使用ids或类标记内容窗格，以指示它们对应的选项卡。然后在标签点击上显示/隐藏内容窗格。

HTML：

<div class="tabs">
    <div class="slate tab-1">Content1</div>
    <div class="slate tab-2">Content2</div>
    <div class="slate tab-3">Content3</div>
</div>

JS：

$("tab-selector").on("click", function () {
    var index = $(this).index() + 1;
    $("div.slate").hide();
    $("div.tab-" + index).show();
});

Answer 2

如果您可以控制您的html，那么您可以在li元素上应用ID，并且相同的ID值应作为类名应用于选项卡内容，这样您就可以获取目标ID到要切换的班级名称：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery onClick导航选项卡 - 需要提取正文内容

2 个答案: