Простые горизонтальные вкладки на JQuery.
Структура вкладок состоит из двух основных частей:
1 - список ссылок (вкладок).
2 - блоки с контентом, соответствующие каждой вкладке.
Список ссылок расположен в ряд над основным описанием. Изначально показывается описание активной ссылки. При переходе между ссылками, старое описание исчезает, а на его месте появляется блок с описанием выбранной ссылки.
Вкладка и описание связываются между собой при помощи одинаковых названий якоря на ссылке и id у блока с описанием вкладки.
<div class="tab-box"> <ul class="tab-nav"> <li><a href="#t1">Вкладка 1</a></li> <li><a href="#t2">Вкладка 2</a></li> <li><a href="#t3">Вкладка 3</a></li> </ul> <div id="t1">Описание первой вкладки</div> <div id="t2">Описание второй вкладки</div> <div id="t3">Описание третьей вкладки</div> </div>
.tab-nav{ margin:0; padding:0; height:26px; list-style:none; } .tab-nav li{ float:left; margin-right:1px; background:#999; } .tab-nav li a{ display:inline-block; padding:0 10px; font:normal 12px/26px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; } .tab-nav li a:hover{ color:#fff; text-decoration:none; background:#777; } .tab-nav li.select a{ background:#bbb; } .tab-nav .active{ display:inline-block; padding:5px; } .tab-box>div{ padding:10px; border:solid 1px #cccccc; background:#fcfcfc; }
$(function(){ $('.tab-nav li:first').addClass('select'); // Первой вкладке добавляетсякласс select $('.tab-box>div').hide().filter(':first').show(); // Скрываются все блоки с описанием вкладок кроме первого $('.tab-nav a').click(function(){ // При клике на вкладку $('.tab-box>div').hide().filter(this.hash).show(); // - показывается блок с описанием текущей вкладки $('.tab-nav li').removeClass('select'); // - удаляется класс 'select' у активной ранее вкладки $(this).parent().addClass('select'); // - добавляется класс 'select' для выбранной вкладки return (false); // - прерывается обработка события onClick }) })
В итоге получится вот такой блок со вкладками.
Комментарии