Ориентация на дочерние вкладки внутри пользовательских вложенных вкладок - PullRequest
Новая
       27

Ориентация на дочерние вкладки внутри пользовательских вложенных вкладок

0 голосов
/ 13 июня 2019

Вот несколько пользовательских вкладок, которые мы создали. У меня проблема в том, что когда вы нажимаете одну из родительских вкладок, это влияет на дочерние вкладки. Это означает, что он удаляет класс .active из «активной» дочерней вкладки.

Я начал использовать селектор jquery: not (), в котором нацеливался на класс .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

1 Ответ

1 голос
/ 14 июня 2019

От родителя, вы хотите, чтобы первый блок табуляции и первые блоки табуляции блокировали разделы первого уровня

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

Плюс вы можете просто к этому выбрать выбранную ссылку

var thisNav = $(e.delegateTarget);

...