Вкладки jQueryБыть может Вы скажете, что таких скриптов хватает, что существует множество вариаций скрипта, да, есть.. но сегодня я хочу вам предложить пример скрипта, у которого есть несколько отличительных особенностей.

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

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

Просмотреть DEMO / Скачать

И так, начнём с html

  • Первая вкладка
  • Вторая вкладка
  • третья вкладка
Содержимое блока первой вкладки
Содержимое блока второй вкладки
Содержимое блока третьей вкладки

Как мы видим html достаточно прост, для каждого пункта li, маркированного списка ul, соответствует свой блок, по порядку.

Стили для этого кода будут таковы

.tab-content{display:none;}
.visible{display:block;}

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

Код же самого JavaScript файла будет таковым

$(document).ready(function() {
 $('ul.tabs').each(function() {
     $(this).find('li').each(function(i) {
       $(this).click(function(){
         $(this).addClass('current-tab').siblings().removeClass('current-tab')
.parents('div.tab-div').find('div.tab-content').hide().end().find('div.tab-content:eq('+i+')').fadeIn(200);
       });
     });
   });
});

Ну и, конечно же, не забываем ПЕРЕД скриптом табов, подключать библиотеку jQuery

Вот впринципе и всё. Если же вы используете другие имена классов и ID у себя в коде, то не забывайте менять их в скрипте.

Я же позволю себе немного приоформить данные вкладки, и допишу следующий код

.tabs{list-style:none; margin-left:20px;}
.tabs li{ float:left; padding:0 15px; height:40px; border-radius:10px 10px 0 0; border:1px solid black; line-height:40px; text-align:center; background:#CCCCCC;color:#fff; }
.tabs li.current-tab{background:#F3F3F3; color:#666666; border-bottom:none; border-top:1px #CCCCCC solid; border-left:1px #ccc solid;}
.tab-content{width: 500px; height:300px; border-radius:10px;background:#F3F3F3; color:#666666; padding:15px; border: 1px solid black; border-top:1px #CCCCCC solid; border-left:1px #ccc solid;}

Ну а так же допишу блок с классом clear

.clear{clear:both;}

И поставлю его после маркированного списка ul, чтобы наши блоки шли снизу от вкладок. Ваша же фантазия безгранична, и вы можете сделать их хоть снизу, хоть слева.

На этом думаю на сегодня с вкладками мы расстанемся. Творческих успехов.

Пару слов от автора:Одним из многочисленным способом продвижения, а также монетизации сайта это покупка — продажа ссылок. Бирж ссылок достаточно много и последнее время они растут как грибы после дождя. Одна из самых старых и авторитетных бирж ссылок Sape.ru.