→   Как делать табы на jQuery

Для начала нам потребуется такая разметка:

  1. <div class="i-tab">
  2.     <ul class="nav">
  3.         <li>Tab 1</li>
  4.         <li>Tab 2</li>
  5.         <li>Tab 3</li>
  6.         <li>Tab 4</li>
  7.         <li>Tab 5</li>
  8.     </ul>
  10.     <ul class="tab-content">
  11.         <li>Tab content 1</li>
  12.         <li>Tab content 2</li>
  13.         <li>Tab content 3</li>
  14.         <li>Tab content 4</li>
  15.         <li>Tab content 5</li>
  16.     </ul>
  17. </div>
*

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

табы на jQuery

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

 

Напишем по вкусу css для этой разметки.

На самом деле CSS может быть любым, можно сделать и вертикальные табы и горизонтальные. Можно даже разнести загловки табов и сами вкладки в разные части страницы. Поэтому предалагаю не останавливаться на нем, здесь мы хотим посмотреть на сниппет.

CSS   (кликабельно)

  1. .tabs {
  2.     width:60%;
  3.     margin:auto;
  4.     background:#2d2d2d;
  5.     overflow:hidden;
  6.     height:auto;
  7.     padding:5px;
  8. }
  9.  
  10. ul.i-tab {
  11.     list-style:none;
  12.     overflow:hidden;
  13.     height:auto;
  14.     padding:5px;
  15.     background:#e4e4e4;
  16.     border:3px #ccc solid;
  17. }
  18.             
  19. ul.i-tab li {
  20.     padding:2px 10px;
  21.     margin:5px;
  22.     float:left;
  23. }
  24.             
  25. ul.i-tab li:hover {
  26.     background:#ccc;
  27.     cursor:pointer
  28. }
  29.             
  30. ul.i-tab li.active {
  31.     background:#ccc;
  32. }     
  33.             
  34. ul.tab-content {
  35.     list-style:none;
  36.     margin:0px;
  37.     padding:5px;
  38. }    
  39.             
  40. ul.tab-content li {
  41.     display:block;
  42.     padding:5px;
  43.     border:4px #4d4d4d solid;
  44.     margin:0px;
  45.     background:#e4e4e4;
  46.     display:none;
  47. }

Теперь самое интересное и простое, то есть js:

Как всегда подключаем jQuery
<script type="text/javascript" src="jQuery.js"></script>
  1. $(function() {
  2.     // Добавим сразу же видимость первым элементам табов
  3.     $('ul.i-tab li:first').addClass ('active');
  4.     $('ul.tab-content li:first').css ('display', 'block');
  5.     // Добавим «кликнутому» элементу класс .active
  6.     $('ul.i-tab').delegate('li:not(.active)', 'click', function() {
  7.         // И удалим у предыдущего
  8.         $(this).addClass('active').siblings().removeClass('active')
  9.             .parents('.tabs').find('ul.tab-content li').hide()
  10.             // Посчитаем по какому по счету табу мы кликнули
  11.             // и откроем соотвествующий элемент
  12.             .eq($(this).index()).fadeIn('slow');
  13.     })
  14. })
*
Скачать rar
24,4 kb
Пример откроется
в новом окне

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

jQuery