Что ж, хватит сухих слов, переходим к сути.
- - он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- -можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- -содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок.
Код jQuery-крипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:
Код: Выделить всё
(function($) {
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
});
});
});
})
})(jQuery)
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
Код: Выделить всё
<div class="section">
<ul class="tabs">
<li class="current">1-я вкладка</li>
<li>2-я вкладка</li>
</ul>
<div class="box visible">
Содержимое первого блока
</div>
<div class="box">
Содержимое второго блока
</div>
</div><!-- .section -->
Обязательные CSS-стили для вышеуказанного HTML-кода
Код: Выделить всё
.box {
display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
}
Пример(внешка)
Источник