<div class="tabs-content" id="tabs-content-0">
<div class="tabs-btn" data-navigation>
<button type="button" class="btnNavigation btnActive" data-tab="button_1"> logo_1 </button>
<button type="button" class="btnNavigation" data-tab="button_2"> logo_2</button>
</div>
<ul data-main-content>
<li class="contentList tabActive" id="tabs-content-1" data-content="button_1">
<div class="tabs-btn" data-navigation>
<button type="button" class="btnNavigation btnActive" data-tab="button_1">
Кнопка 1
</button>
<button type="button" class="btnNavigation" data-tab="button_2">
Кнопка 2
</button>
<button type="button" class="btnNavigation" data-tab="button_3">
Кнопка 3
</button>
</div>
<ul data-main-content>
<li class="contentList tabActive" data-content="button_1">
<h3 class="tab_title">Заголовок контента кнопки 1</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
</li>
<li class="contentList" data-content="button_2">
<h3 class="tab_title">Заголовок контента кнопки 2</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
</li>
<li class="contentList" data-content="button_3">
<h3 class="tab_title">Заголовок контента кнопки 3</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
</li>
</ul>
</li>
<li class="tabs-content contentList" id="tabs-content-2" data-content="button_2">
<div class="tabs-btn" data-navigation>
<button type="button" class="btnNavigation btnActive" data-tab="button_1">
Кнопка 2.1
</button>
<button type="button" class="btnNavigation" data-tab="button_2">
Кнопка 2.2
</button>
<button type="button" class="btnNavigation" data-tab="button_3">
Кнопка 2.3
</button>
</div>
<ul data-main-content>
<li class="contentList tabActive" data-content="button_1">
<h3 class="tab_title">Заголовок контента кнопки 2.1</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
</li>
<li class="contentList" data-content="button_2">
<h3 class="tab_title">Заголовок контента кнопки 2.2</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
</p>
</li>
<li class="contentList" data-content="button_3">
<h3 class="tab_title">Заголовок контента кнопки 2.3</h3>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. Меня большой грамматики о использовало, если то!
Ведущими парадигматическая великий необходимыми однажды, продолжил
семантика буквоград рыбными живет? Она, последний приставка!
</p>
</li>
</ul>
</li>
</div>
.tabs-content {
//display: flex;
justify-content: space-around;
background-color: #f2f2f2;
padding: 5px;
margin: 0;
margin-bottom: 25px;
}
.tabs-btn {
margin-bottom: 5px;
}
.btnNavigation {
cursor: pointer;
padding: 20px;
border-radius: 5px;
color: #f51ad4;
//width: 100%;
text-align: center;
margin-right: 5px;
font-weight: bold;
}
.btnActive {
background-color: #fff;
color: #f85a16;
}
.tab_title {
font-size: 30px;
font-weight: bold;
margin-bottom: 10px;
}
.contentList{
display: block;
background-color: #fff;
padding: 15px;
}
.contentList:not(.tabActive) {
display: none;
}
class Tabs {
constructor(selector) {
this.refs = {
navigation: document.querySelector(`${selector} > [data-navigation] `),
content: document.querySelector(`${selector} > [data-main-content]`),
};
this.refs.navigation.addEventListener('click', this.onChangeNavigation.bind(this));
}
onChangeNavigation({target}) {
if (target.nodeName !== 'BUTTON') return;
const currentButton = target;
this.clearPrevClasses();
this.addCurrentClass(currentButton);
}
clearPrevClasses() {
const prevActiveButton = this.refs.navigation.querySelector('.btnActive');
const prevActiveContent = this.refs.content.querySelector(':scope > .tabActive');
if (prevActiveButton) {
prevActiveButton.classList.remove('btnActive');
prevActiveContent?.classList.remove('tabActive');
}
}
addCurrentClass(currentButton) {
const currentTab = currentButton.dataset.tab;
const currentContent = this.refs.content.querySelector(`:scope > [data-content=${currentTab}]`, );
currentButton.classList.add('btnActive');
currentContent.classList.add('tabActive');
}
}
tabs0 = new Tabs('#tabs-content-0');
tabs1 = new Tabs('#tabs-content-1');
tabs2 = new Tabs('#tabs-content-2');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.