Блок с вкладками на jQuery

Тема которая не дает покоя многим веб-мастерам - это возможность аккуратного и компактного размещения большого количества текста, изображений и даже видео роликов в пределах одной страницы сайта или блога. Для решения этой задачи, часто используют блоки с вкладками, или как еще говорят: с табами. Такой подход дает возможность добавить на одну веб-страницу достаточно большое количество контента, не ухудшая при этом навигацию по ней, и даже наоборот. Блок вкладок позволяет качественно оформить содержимое страницы, во многом улучшая ее пользовательский интерфейс.
  Вариантов и идей на этот счет в сети очень много и достаточно разных, от самых простых, с применением только возможностей CSS, до весьма объемных скриптов на чистом JavaScript. В этой статье я хочу поделится своей находкой весьма интересного и очень компактного jQuery скрипта для реализации блока с вкладками на сайте или в блоге.
Вот как все работает:
DEMO
 Единственное что я сделал, это не стал использовать для создания меню список <ul> - <li>, как это сделано в оригинале, а сделал все на блоках - <div>.
  Чтобы использовать такой блок у себя на сайте, необходимо первым делом подключить библиотеку jQuery, если этого еще не сделано.
 После этого можно добавить скрипт, который и будет обрабатывать нужные нам события и, собственно, переключать вкладки.

(function($) {
$(function() {
 $('div.intabs').delegate('div:not(.current)', 'click', function() {
  $(this).addClass('current').siblings().removeClass('current')
   .parents('div.allsection').find('div.pagebox').eq($(this).index()).fadeIn(150).siblings('div.pagebox').hide();
 })
})
})(jQuery)

  Пример CSS с DEMO страницы:

.allsection {
 width: 850px;
 margin: 0;
 text-align: left;
 }
.intabs {
 margin: 0;
 padding: 0;
 }
.intabs div {
 float:left;
 cursor: pointer;
 text-align: center;
 font: normal normal 16px Tahoma, sens serif;
 color:#000;
 padding: 7px 10px;
 margin: 0 3px 0 0;
 border-radius: 3px 3px 0 0;
 background: #b8aaed;
 border: 1px solid #836FFF;
}
.intabs div:hover {
 border: 1px solid #A08BED;
 color:#000;
 background: #dbd5ef;
}
.intabs div.current {
 background: #eceaf2;
 border: 1px solid #C4C4C4;
 border-bottom: 1px solid transparent;
}
.pagebox {
 display: none; /*обязательный параметр*/
 padding: 10px;
 color: #000;
 background: #eceaf2;
}
.pagebox.visible {
 display: block; /*обязательный параметр*/
 border-top: 0;
}

  И собственно HTML код, который вставляется уже на страницу и наполняется содержимым.

<div class="allsection"> <!--весь блок-->

<div class="intabs"> <!--кнопки меню-->
<div class="current">Первая</div>
<div>Вторая</div>
<div>Третья</div>
<div>Четвертая</div>
</div> <!--Конец блока кнопок-->

<br clear="all"/> <!--обнуляем обтекания-->

<!-- блоки с контентом--> 
 <div class="pagebox visible">...</div>
 <div class="pagebox">...</div>
 <div class="pagebox">...</div>
 <div class="pagebox">...</div>
</div>

Внутри блоков можно размещать текст, ссылки, изображения. С видео могут возникнуть проблемы, т.к. если проигрыватель установлен на автоматическое воспроизведение, то будут загружаться и проигрываться все ролики одновременно.

 Можно создавать неограниченное количество блоков.

Источник Свобода слова вебмастерского