Вкладки на JQuery

Главная > Вкладки на JQuery

Простые горизонтальные вкладки на JQuery.

Описание работы вкладок

Структура вкладок состоит из двух основных частей:

1 - список ссылок (вкладок).

2 - блоки с контентом, соответствующие каждой вкладке.

Список ссылок расположен в ряд над основным описанием. Изначально показывается описание активной ссылки. При переходе между ссылками, старое описание исчезает, а на его месте появляется блок с описанием выбранной ссылки.

HTML разметка

Вкладка и описание связываются между собой при помощи одинаковых названий якоря на ссылке и 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>

CSS стили

.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
  })
})