const tabs = (tabSelector, tabContentSelector, anchorSelector) => {
const tabs = document.querySelectorAll(tabSelector),
tabContents = document.querySelectorAll(tabContentSelector);
const anchor = document.querySelectorAll(anchorSelector);
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => {
inactiveTab();
tab.classList.add('active');
hideContent();
showContent(i);
});
});
function hideContent() {
tabContents.forEach(item => {
item.classList.remove('show');
item.style.display = 'none';
});
}
if (tabs.length > 1) {
anchor.forEach((item, i) => {
item.addEventListener('click', () => {
hideContent();
showContent(i);
inactiveTab(i);
tabs[i].classList.add('active');
})
})
}
function showContent(i = 0) {
tabContents[i].style.display = 'block';
tabContents[i].classList.add('show');
}
function inactiveTab() {
tabs.forEach(item => item.classList.remove('active'));
}
hideContent();
showContent();
};
export default tabs;
//вот тут функция табов вызывается
window.addEventListener('DOMContentLoaded', function() {
Slick();
button();
form('https://stalbr.ru/mail.php');
navbar();
try {
tabs('[data-tabs]', '.tabs-content', '.roof_anchor');
} catch (error) {}
<section class="production" id="production">
<div class="container">
<div class="row">
<div class="col-xl-4 col-sm-12">
<h3>Продукция</h3>
<hr>
</div>
<div class="col-xl-8 col-sm-12">
<p>
Ниже представлены некоторые стандартные изделия, которые мы предлагаем. Также производим любые изделия по вашим размерам.
Материалы выполнения: оцинкованная сталь, нержавеющая сталь, алюминий, медь. Стандартная толщина металла от 0,35мм до 0,7мм.
Широкая цветовая гамма по каталогу RAL и текстур под дерево, более 100 оттенков. Одностороннее и двухстороннее покрытие.
</p>
</div>
</div>
<nav>
<div class="nav nav-tabs">
<button class="nav-link active tab-item btn-primary" data-tabs>Кровля</button>
<button class="nav-link tab-item btn-primary" data-tabs>Фасад</button>
<button class="nav-link tab-item btn-primary" data-tabs>Для бани</button>
<button class="nav-link tab-item btn-primary" data-tabs>Другое</button>
<a href="https://stalbr.ru/zabory/" class="nav-link tab-item btn-primary" style="color: white;">Забор Жалюзи</a>
</div>
</nav>
<!--Товары-->
<!--1 ряд-->
<div class="tabs-contents-wrapper">
<div class="tabs-content fade show">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12">
<div class="card-deck-wrapper">
<div class="card-deck" id='roof'>
<!-- content -->
</div>
</div>
</div>
</div>
</div>
<!-- фасады -->
<div class="tabs-content fade">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12">
<div class="card-deck-wrapper">
<div class="card-deck" id="facade">
<!-- content -->
</div>
</div>
</div>
</div>
</div>