Начинаем, как всегда, со структуры 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 соответствующему ей блоку с контентом.
Готово!
к ним можно тег там прикрутить типо tab1 tab2 tab3 ??