Ориентация на дочерние вкладки в настраиваемых вложенных вкладках

Вот несколько пользовательских вкладок, которые мы создали. Проблема, с которой я сталкиваюсь, заключается в том, что когда вы нажимаете на одну из родительских вкладок, это влияет на дочерние вкладки. Это означает, что он удаляет класс .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. Обратите внимание, что происходит с дочерними вкладками, когда вы включаете родительские теги.

Образец плункра

Ой, мой плохой. Я исправлю это. Я хотел ввести tab-link.

iChido 13.06.2019 19:35
$(this).closest('.tab-parent > .tabs').find($('.tab-link')); <= у вас также есть пара случаев, когда вы даете find() результаты селектора. Это недействительно. Вы должны найти селектор.
Taplar 13.06.2019 19:37

@Taplar: Не возражаете, если я попрошу вас показать мне образец? Кроме того, посмотрите на мой образец plnkr.

iChido 13.06.2019 23:04
find('.tab-link')
Taplar 13.06.2019 23:12
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
4
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

От родителя вам нужен первый блок вкладок, а первый блок вкладок блокирует разделы первого уровня.

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

Плюс вы можете просто к этому для выбора нажатой ссылки

var thisNav = $(e.delegateTarget);

Другие вопросы по теме