Вертикальные вкладки на 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
  })
})

Пример работы вкладок на JQuery.


Описание первой вкладки

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

Описание третьей вкладки


Текст под изображением.


Комментарии  

0 #3 profile 31.10.2018 19:58
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать
+3 #2 Михаил 24.04.2015 07:29
Цитирую Dmitry:
Подскажите, содержимое вкладок подгружается браузерами как? Надеюсь, не все сразу?

Содержимое всех вкладок загружается целиком. Когда вы нажимаете на одну из вкладок, становится видимым содержимое этой вкладки а остальное скрывается.
Цитировать
0 #1 Dmitry 09.03.2015 15:34
Подскажите, содержимое вкладок подгружается браузерами как? Надеюсь, не все сразу?
Цитировать

Добавить комментарий


Защитный код
Обновить