Универсальный jQuery-скрипт для блоков с вкладками (табами)

SLITE

Почему я называю свой новый скрипт для jQuery-вкладок универсальным:

- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью 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>

Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.

Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:

Код: Выделить всё

(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)

Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c 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 -->

Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.

Обязательные CSS-стили для вышеуказанного HTML-кода

Код: Выделить всё

.box {
  display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
  display: block; /* по умолчанию показываем нужный блок */
}

Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.

Пример(внешка)
Источник