JQuery. Вертикальные вкладки

Главная > JQuery. Вертикальные вкладки

Вертикальные вкладки на JQuery.

Список вкладок должен располагаться в столбик слева от основного описание вкладок. Поехали ...

HTML разметка

<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 class="tab-panels">
        <div id="t1">Описание первой вкладки</div>
        <div id="t2">Описание второй вкладки</div>
        <div id="t3">Описание третьей вкладки</div>
    </div>
</div>

CSS стили

.tab-box:after{
  clear:both; 
  content:""; 
  display:block;
}
.tab-nav{
  margin:0;
  padding:0;
  list-style:none;
  width:100px;
  float:left;
}
.tab-nav li{
  float:left;
  margin-bottom:1px;
  background:#999;
}
.tab-nav li a{
  display:inline-block;
  width:80px;
  padding:5px 10px;
  font:normal 12px 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{
  margin:0 0 0 100px;
  padding:10px;
  border:solid 1px #cccccc;
  background:#fcfcfc;
}

Скрипт

$(function(){
  $('.tab-nav li:first').addClass('select');                // Первой вкладке добавляетсякласс select
  $('.tab-panels>div').hide().filter(':first').show();      // Скрываются все блоки с описанием вкладок кроме первого
  $('.tab-nav a').click(function(){                         // При клике на вкладку
    $('.tab-panels>div').hide().filter(this.hash).show();   // - показывается блок с описанием текущей вкладки
    $('.tab-nav li').removeClass('select');                 // - удаляется класс 'select' у активной ранее вкладки
    $(this).parent().addClass('select');                    // - добавляется класс 'select' для выбранной вкладки
    return (false);                                         // - прерывается обработка события onClick
  })
})