<div class="tab-box">
<ul class="tab-nav">
<li><a href="javascript:void(0);" data-id="1">Суспільно-освітній проект для дітей та батьків “SMILE”</a></li>
<li><a href="javascript:void(0);" data-id="2">Суспільно-освітній проект для дітей та батьків “SMILE”</a></li>
<li><a href="javascript:void(0);" data-id="3">Суспільно-освітній проект для дітей та батьків “SMILE”</a></li>
<li><a href="javascript:void(0);" data-id="4">Суспільно-освітній проект для дітей та батьків “SMILE”</a></li>
</ul>
</div>
</div>
<div>
<div class="tab-panels">
<div id="1">Info 1 </div>
<div id="2">Описание второй вкладки</div>
<div id="3">Описание третьей вкладки</div>
<div id="4">Описание 4 вкладки</div>
</div>
</div>$('.tab-nav li:first').addClass('select'); // Первой вкладке добавляетсякласс select
$('.tab-panels>div').hide().filter(':first').show(); // Скрываются все блоки с описанием вкладок кроме первого
$('.tab-nav a').click(function(){
var $fast = $(this).attr('data-id'); // При клике на вкладку
$('.tab-panels > div').hide();
$(".tab-panels > div#"+ $fast + "").show();
$('.tab-nav li').removeClass('select'); // - удаляется класс 'select' у активной ранее вкладки
$(this).parent().addClass('select'); // - добавляется класс 'select' для выбранной вкладки
return (false); // - прерывается обработка события onClick
});
External CSS
This Pen doesn't use any external CSS resources.