Всем привет! Подскажите, пожалуйста, как сделать так, чтобы у меня табы переключались с помощью кнопок "Назад" и "Следующая" с js/jquery. Еще, когда я хочу вернуться назад и нажимаю на предыдущую ячейку, ничего не срабатывает, но когда нажимаю следующую, все прекрасно работает. В общем, у меня какой то кривоватый таб:) Подскажите, пожалуйста!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab active">
<div class="tab__content">
<ul class="steps">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
</ul>
<h2>Заголовок 1</h2>
<p>Текст 1</p>
<button class="btnNext">Следующая</button>
</div>
</div>
<div class="tab">
<div class="tab__content">
<ul class="steps">
<li class="step">1</li>
<li class="step active">2</li>
<li class="step">3</li>
</ul>
<h2>Заголовок 2</h2>
<p>Текст 2</p>
<button class="btnNext">Следующая</button>
<button class="btnPrev">Назад</button>
</div>
</div>
<div class="tab">
<div class="tab__content">
<ul class="steps">
<li class="step">1</li>
<li class="step">2</li>
<li class="step active">3</li>
</ul>
<h2>Заголовок 3</h2>
<p>Текст 3</p>
</div>
</div>
</div>
ul,li {
display: block;
cursor: pointer;
}
.tabs {
margin: 50px;
}
.steps {
display: flex;
position: absolute;
top: 0px;
left: 35px;
}
.step {
display: flex;
margin-right: 15px;
font-size: 15px;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 50px;
height: 50px;
border: 1px solid red;
}
.step.active{
background: green;
}
.tab {
padding: 20px;
background: blue;
width: 300px;
height: 200px;
border-radius: 20px;
display: none;
}
.tab.active {
display: block;
}
(function($) {
$(function() {
$('ul.steps').on('click', 'li:not(.active)', function() {
$(this)
.addClass('active').siblings().removeClass('active')
.closest('div.tabs').find('div.tab').removeClass('active').eq($(this).index()).addClass('active');
});
});
})(jQuery);
