Question

这是我们创建的一些自定义标签。我遇到的问题是，当您单击父选项卡之一时，它会影响子选项卡。这意味着它将从“活动”子标签中删除.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 Sample

Answer 1

从父级开始，您需要第一个标签块和第一个标签块的第一级部分

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

此外，您只能选择点击的链接

var thisNav = $(e.delegateTarget);

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

1 个答案: