在自定义嵌套选项卡中定位子选项卡答案

【问题标题】：Targeting Child Tabs Within Custom Nested Tabs在自定义嵌套选项卡中定位子选项卡
【发布时间】：2019-06-13 17:23:48
【问题描述】：

这是我们创建的一些自定义标签。我遇到的问题是，当您单击其中一个父选项卡时，它会影响子选项卡。这意味着它会从“活动”子选项卡中删除 .active 类。

我已经开始使用 :not() jquery 选择器，我在其中定位 .child-pane 类。它现在正在工作，但它禁用了子选项卡。现在只有父标签有效。

<div class="tab-parent">
  <div class="tabs">
    <a href="#tabOne" class="tab-link active">Tab One</a>
    <a href="#tabTwo" class="tab-link">Tab Two</a>
  </div>
  <div class="tab-block">
    <section class="pane active" id="tabOne">

      <h3>Tab One Content</h3>

      <div class="tab-parent">
        <div class="tabs">
          <a href="#childTabOne" class="tab-link">Child Tab One</a>
          <a href="#childTabTwo" class="tab-link active">Child Tab Two</a>
        </div>
        <div class="tab-block">
          <section class="pane" id="childTabOne">
            Child Tab One
          </section>
          <section class="pane active" id="childTabTwo">
            Child Tab Two
          </section>
        </div>
      </div>

    </section>
    <section class="pane" id="tabTwo">
      ...
    </section>
  </div>
</div>

我的 jQuery 代码：

function tabAction(e) {
    e.preventDefault();
    var activeTab = $(this).attr('href');
    var thisNav = $(this).closest('.tab-parent > .tabs').find($('.tab-link'));
    var thisBlock = $(this).closest('.tab-parent').find($('.pane:not(.child-pane)'));

    thisBlock.each(function () {
        $(this).removeClass('active');
    });

    thisNav.each(function () {
        $(this).removeClass('active');
    })

    $(this).addClass('active');

    $(activeTab).addClass('active');
}

$('.tab-link').on('click', tabAction);

我创建了一个 plunkr。请注意当您打开父标签时子标签会发生什么。

Plunkr Sample

【问题讨论】：

糟糕，我的错。我会修复它。我的意思是输入 tab-link。
$(this).closest('.tab-parent > .tabs').find($('.tab-link')); find() 一个选择器的结果。这是无效的。你应该给 find 一个选择器。
@Taplar：介意我让你给我看个样本吗？另外，看看我的 plnkr 示例。
find('.tab-link')

标签： jquery tabs nested

【解决方案1】：

从父级开始，您需要第一个选项卡块，而第一个选项卡块是第一级部分

var thisBlock = $(this).closest('.tab-parent').find('> .tab-block > section');

另外，您可以选择点击的链接

var thisNav = $(e.delegateTarget);

【讨论】：