<div class="tabs clearfix">
<div class="tab_navigation">
<a class="selected" href="#cat1">Категория 1</a>
<a href="#cat2">Категория 2</a>
</div>
<div id="cat1" class="tab">
test1
</div>
<div id="cat2" class="tab">
test2
</div>
</div>
и простой jquery
//Табы
var nav = $('.tabs').find('.tab_navigation');
var tabs = $('.tabs').find('.tab_container');
if (nav.children('.selected').length > 0) {
$(nav.children('.selected').attr("href")).show();
} else {
nav.children().first().addClass('selected');
tabs.children().first().show();
}
$('.tab_navigation a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('selected')) {
return true;
}
tabs.children().hide();
nav.children().removeClass('selected');
$(this).addClass('selected');
$($(this).attr("href")).fadeIn(200);
});
Если размещаю эти табы на одной странице 2 раза, то все рушится, при переключении одних ломаются другие. Как разделить их?
https://codepen.io/html_student77/pen/LYeBvQG
