Табы - очень распространенный элемент на сайте, который часто используется для динамичного представления какой-нибудь структурной информации.
Вспоминаю свой опыт реализации табов на сайте. Для этого я в первую очередь полез искать готовые скрипты, библиотеки, пришлось знакомиться с инструкциями по запуску скрипта. На самом деле оказалось все намного проще.
Для работы табов нам пригодится всего 2 функции jquery: index() и eq(). Идея следующая: при клике на таб определяем его индекс, закрываем все контейнеры с информацией и открываем контейнер под тем же индексом, что и таб, на который кликнули. Важно, чтобы в html порядок табов и контейнеров соответствовал друг другу.
html:
<div id="hellotabs"> <ul> <li class="active">1 вкладка</li> <li>2 вкладка</li> <li>3 вкладка</li> </ul> <div class="hellotabs-content"> <div class="hellotabs-content-item active"> <p>Содержание 1ой вкладки</p> </div> <div class="hellotabs-content-item"> <p>Содержание 2ой вкладки</p> </div> <div class="hellotabs-content-item"> <p>Содержание 3ей вкладки</p> </div> </div> </div>
jquery:
<script type="text/javascript"> $(document).ready(function(){ //как загрузился документ $('#hellotabs ul li').click(function(){ //функция при клике на таб $('.hellotabs-content > div').hide(); //закрываем все контейнеры с информацией //открываем контейнер под тем же индексом, что и таб, на который нажали: $('.hellotabs-content .hellotabs-content-item').eq($(this).index()).show(); //$('.hellotabs-content .hellotabs-content-item').eq($(this).index()).fadeIn(); //плавное появление //$('.hellotabs-content .hellotabs-content-item').eq($(this).index()).slideDown(); //открывает как слайд $('#hellotabs ul li').removeClass('active'); //отключаем активность всех табов $(this).addClass('active'); //включаем активность нажатому табу }); }); </script>
Как видите, достаточно определить индекс нажатой кнопки и открыть контейнер под тем же индексом. Пример работы табов с готовым оформлением вы можете увидеть на демо:
И css для примера:
<style type="text/css"> #hellotabs{ width: 980px; margin: 0 auto; } #hellotabs ul{ margin: 0; padding: 0; } #hellotabs ul li{ display: inline-block; font-family: helvetica; padding: 10px 50px; border: 1px solid rgb(216, 216, 216); margin: 0px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; border-bottom: none; background: rgb(222,239,255); background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)), color-stop(100%,rgba(152,190,222,1))); background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); color: rgb(31, 29, 29); text-shadow: 1px 1px 0px rgb(219, 219, 219); cursor: pointer; } #hellotabs ul li:hover,#hellotabs ul li.active{ background: rgb(240,249,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */ } #hellotabs .hellotabs-content{ border: 1px solid rgb(216, 216, 216); padding: 10px 20px; } #hellotabs .hellotabs-content .hellotabs-content-item{ display:none; } #hellotabs .hellotabs-content .hellotabs-content-item.active{ display:block; }