Всем привет! Сегодня мы покажем как делать табы (они же вкладки) с помощью jQuery. Табы довольно популярная штука в современном вебе, так что любой уважающий себя человек просто обязан знать, как их делать. Поехали.
Я постараюсь все расписывать довольно подробно, чтобы не было непонимания. Нетерпеливые могут сразу посмотреть живой пример.
Итак, для начала нам нужен HTML. Скажем, у нас будет всего 3 таба (соотвественно и 3 вида содержимого). Пишем следующий код:
<h1>Цитаты</h1>
<div class="tabs">
<!-- Это сами вкладки -->
<ul class="tabNavigation">
<li><a class="" href="#first">Д.Огилви</a></li>
<li><a class="" href="#second">Миллер</a></li>
<li><a class="" href="#third">Черчилль</a></li>
</ul>
<!-- Это контейнеры содержимого -->
<div id="first">
<h2>Д.Огилви</h2>
<p>Лучший способ превратить работника в генератор идей это возложить на него самую высокую ответственность.</p>
</div>
<div id="second">
<h2>Миллер</h2>
<p>Деньги не имеют значения — пока они у вас есть.</p>
</div>
<div id="third">
<h2>Черчилль</h2>
<p>Пессимист видит трудности при каждой возможности; оптимист в каждой трудности видит возможности.</p>
</div>
</div>
Обратите внимание, что имя якоря ссылки таба соотвестсвует id дива.
Теперь добавим сюда стилей по вкусу:
div.tabs {
background: #333;
padding: 1em;
}
div.container {
margin: auto;
width: 90%;
margin-bottom: 10px;
}
ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
ul.tabNavigation li {
display: inline;
}
ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666;
color: #000;
text-decoration: none;
}
ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}
ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}
ul.tabNavigation li a:focus {
outline: 0;
}
div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}
div.tabs div h2 {
margin-top: 0;
}
Финальным штрихом будет JavaScript код:
$(function () {
var tabContainers = $('div.tabs > div'); // получаем массив контейнеров
tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
// далее обрабатывается клик по вкладке
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide(); // прячем все табы
tabContainers.filter(this.hash).show(); // показываем содержимое текущего
$('div.tabs ul.tabNavigation a').removeClass('selected'); // у всех убираем класс 'selected'
$(this).addClass('selected'); // текушей вкладке добавляем класс 'selected'
return false;
}).filter(':first').click();
});
Теперь остается посмотреть, что у нас получилось.
Надо сказать, что сегодня мы изобрели велосипед (плагинов для табов огромное количество), но зато посмотрели как работают селекторы jQuery. Еще к плюсам можно отнести то, что при отключенном JS пользователь все равно увидит информацию из табов.
На сегодня все. Вопросы и замечания — в комментариях. Пока.
