В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на jQuery. Данная реализация подойдет там, где необходимо установить простенькие табы, на дополнительных эффектах визуализации останавливаться не будем.
Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с id=wr-tabs, далее в ней добавляем блок tabs – в нём будут находиться наши вкладки, и блок content – сюда кладем блоки с выводимым контентом.
<div id="wr-tabs">
<div class="tabs">
<div class="tab active">Вкладка №1</div>
<div class="tab">Вкладка №2</div>
<div class="tab">Вкладка №3</div>
<div class="tab">Вкладка №4</div>
</div>
<div class="content">
<div class="tab-cont active">
Контент №1
</div>
<div class="tab-cont">
Контент №2
</div>
<div class="tab-cont">
Контент №3
</div>
<div class="tab-cont">
Контент №4
</div>
</div>
</div>
Переходим к CSS стилям наших вкладок.
Тут главное указать для активного блока с контентом свойство display со значением block, а для активной вкладки - такой же стиль, как и при наведении.
#wr-tabs{
width: 700px;
margin: 40px auto 0;
}
#wr-tabs .tabs{
background-color: #fff;
margin-bottom: 3px;
}
#wr-tabs .tabs:after{
content: "";
display: block;
clear: both;
height: 0;
}
#wr-tabs .tabs .tab{
float: left;
cursor: pointer;
border-right: 1px solid #f2f4f9;
padding: 10px 20px;
}
#wr-tabs .tabs .tab:last-child{
border-right: none;
}
#wr-tabs .tabs .tab:hover,
#wr-tabs .tabs .tab.active{
background-color: #c7e7f9;
color: #1d7ee4;
}
#wr-tabs .content{
background-color: #fff;
}
#wr-tabs .content .tab-cont{
display: none;
padding: 15px 10px;
}
#wr-tabs .content .tab-cont.active{
display: block;
}
Так как для вкладок мы используем библиотеку jQuery, скрипт получается очень коротким, и, по вашему желанию, может быть легко усложнен различными визуальными эффектами, легко реализуемыми при помощи этой библиотеки.
$(function(){
$("#wr-tabs").on("click", ".tab", function(){
var tabs = $("#wr-tabs .tab"),
cont = $("#wr-tabs .tab-cont");
// Удаляем классы active
tabs.removeClass("active");
cont.removeClass("active");
// Добавляем классы active
$(this).addClass("active");
cont.eq($(this).index()).addClass("active");
return false;
});
});
Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.
Готово!