JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Навигация для табов -->
<div class="nav-tabs">
<div class="active">Раз</div>
<div>Два</div>
<div>Три</div>
</div>
<!-- Контейнер с табами -->
<div class="tabs-content">
<div class="tab active">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
<!-- Контейнер с табами -->
<div class="tabs-content">
<div class="tab active">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
CSS
.active {
color: red;
}
JavaScript
$('.nav-tabs div').click(function () {
if (!($(this).hasClass('active'))) {
var thisLi = $(this);
var numLi = thisLi.index();
thisLi.addClass('active').siblings().removeClass('active');
$('.tabs-content div.tab').each(function() {
$(this).removeClass('active');
if ($(this).index() == numLi)
$(this).addClass('active');
});
}
});