Вот несколько пользовательских вкладок, которые мы создали. Проблема, с которой я сталкиваюсь, заключается в том, что когда вы нажимаете на одну из родительских вкладок, это влияет на дочерние вкладки. Это означает, что он удаляет класс .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. Обратите внимание, что происходит с дочерними вкладками, когда вы включаете родительские теги.
$(this).closest('.tab-parent > .tabs').find($('.tab-link'));
<= у вас также есть пара случаев, когда вы даете find()
результаты селектора. Это недействительно. Вы должны найти селектор.
@Taplar: Не возражаете, если я попрошу вас показать мне образец? Кроме того, посмотрите на мой образец plnkr.
find('.tab-link')
От родителя вам нужен первый блок вкладок, а первый блок вкладок блокирует разделы первого уровня.
var thisBlock = $(this).closest('.tab-parent').find('> .tab-block > section');
Плюс вы можете просто к этому для выбора нажатой ссылки
var thisNav = $(e.delegateTarget);
Ой, мой плохой. Я исправлю это. Я хотел ввести tab-link.