Вертикальные вкладки на JQuery.
Список вкладок должен располагаться в столбик слева от основного описание вкладок. Поехали ...
<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>
.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 }) })
Комментарии
Содержимое всех вкладок загружается целиком. Когда вы нажимаете на одну из вкладок, становится видимым содержимое этой вкладки а остальное скрывается.