Подскажите, пожалуйста, как реализовать переключение табов по кнопкам. что я делаю не так. Благодарю за внимание.
document.querySelectorAll('.tabs-triggers__item').forEach((item) =>
item.addEventListener('click', function(e) {
e.preventDefault();
const id = e.target.getAttribute('href').replace('#', '');
document.querySelectorAll('.tabs-triggers__item').forEach(
(child) => child.classList.remove('tabs-triggers__item_active')
);
document.querySelectorAll('.tabs-content__item').forEach(
(child) => child.classList.remove('tabs-content__item_active')
);
item.classList.add('tabs-triggers__item_active');
document.getElementById(id).classList.add('tabs-content__item_active');
})
);
document.querySelector('.tabs-triggers__item').click();
const btnPrev = document.querySelector('.tabs-button__prev');
const btnNext = document.querySelector('.tabs-button__next');
const triggers = document.querySelector('.tabs-triggers__item');
const content = document.querySelector('.tabs-content__item');
btnNext.addEventListener('click', function() {
const id = triggers.getAttribute('href').replace('#', '');
triggers.classList.remove('tabs-triggers__item_active');
triggers.nextElementSibling.classList.add('tabs-triggers__item_active');
content.classList.remove('tabs-content__item_active');
document.getElementById(id).nextElementSibling
.classList.add('tabscontent__item_active');
});
btnPrev.addEventListener('click', function() {
const id = triggers.getAttribute('href').replace('#', '');
triggers.classList.remove('tabs-triggers__item_active');
triggers.previousElementSibling.classList.add('tabs-triggers__item_active');
content.classList.remove('tabs-content__item_active');
document.getElementById(id).previousElementSibling
.classList.add('tabs-content__item_active');
});
.wrapper {
max-width: 1000px;
margin: 0 auto;
}
.tabs-triggers {
display: flex;
margin-bottom: 10px;
}
.tabs-content {
margin-bottom: 10px;
}
.tabs-triggers__item {
width: 50px;
height: 50px;
padding-top: 15px;
text-align: center;
text-decoration: none;
color: #000;
border: 1px solid #DBDBDB;
}
.tabs-triggers__item_active {
background: #118BDD;
color: #fff;
}
.tabs-content__item {
display: none;
background-color: #eee;
padding: 20px;
}
.tabs-content__item_active {
display: block;
}
.tabs-button__prev,
.tabs-button__next {
display: inline-block;
width: 50px;
height: 50px;
}
<div class="wrapper">
<div class="tabs">
<div class="tabs-triggers">
<a href="#tab-1" class="tabs-triggers__item">1</a>
<a href="#tab-2" class="tabs-triggers__item">2</a>
<a href="#tab-3" class="tabs-triggers__item">3</a>
<a href="#tab-4" class="tabs-triggers__item">4</a>
<a href="#tab-5" class="tabs-triggers__item">5</a>
</div>
<div class="tabs-content">
<div id="tab-1" class="tabs-content__item">Content 1</div>
<div id="tab-2" class="tabs-content__item">Content 2</div>
<div id="tab-3" class="tabs-content__item">Content 3</div>
<div id="tab-4" class="tabs-content__item">Content 4</div>
<div id="tab-5" class="tabs-content__item">Content 5</div>
</div>
<div class="tabs-buttons">
<button class="tabs-button__prev" type="button" name="button"><</button>
<button class="tabs-button__next" type="button" name="button">></button>
</div>
</div>
</div>