Добрый день! Это вкладки. При нажатии на один блок <div id="1" class="tabs">1</div>
блоку с id1
присваивается класс .tabs-selected
. А у нас блоки дублируются. Помогите, пожалуйста, сделать, чтобы при нажатии на один блок, класс присваивался сразу двум блокам, у которых одинаковые id
. Спасибо за помощь!
$(document).ready(function() {
$('.tabs').bind('click', function() {
$('.content').hide();
$('#' + $(this).attr('id') + '-content').show();
$('.tabs').removeClass('tabs-selected');
$(this).addClass('tabs-selected');
});
});
.page {
width: 500px;
}
.tabs {
width: 124px;
float: left;
background: green;
cursor: pointer;
}
.tabs-selected {
background: #000;
color: #fff;
}
.content {
width: 500px;
float: left;
background: #ff0000;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">
<div id="1" class="tabs">1</div>
<div id="2" class="tabs">2</div>
<div id="3" class="tabs">3</div>
<div id="4" class="tabs">4</div>
<div id="1" class="tabs">1</div>
<div id="2" class="tabs">2</div>
<div id="3" class="tabs">3</div>
<div id="4" class="tabs">4</div>
<div id="1-content" class="content">Текст 1</div>
<div id="2-content" class="content">Текст 2</div>
<div id="3-content" class="content">Текст 3</div>
<div id="4-content" class="content">Текст 4</div>
</div>
attr(a,b)