jQuery Tabs – делаем вкладки

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

Но никто вас не ограничивает в области использования вкладок, главное знать как они создаются, о чем мы сегодня и поговорим 🙂

Основная особенность вкладок - это их функциональность. Для пользователя видны все названия вкладок, но при этом отображается содержимое только одной, активной-текущей вкладки.
Для реализации этого функционала наших вкладок мы будем использовать библиотеку jQuery.

 

 

HTML структура jQuery Tabs

Структурно наши вкладки представляют из себя список из якорных ссылок и блоки с контентом.

  <div id="tabs">
    <!-- Вкладки выполнены в виде списка с якорными ссылками -->
    <ul class="tabs">
      <li class="tab active"><a href="#description" class="active">Описание</a></li>
      <li class="tab"><a href="#params">Характеристики</a></li>
      <li class="tab"><a href="#replay">Отзывы</a></li>
    </ul>
    <!-- Содержимое каждой вкладки имеет id в соответствии с якорной ссылкой -->
    <div class="tabs-content">
      <div id="description">
        <h3>Описание</h3>
        <p>Текст описания товара </p>
      </div>
      <div id="params">
        <h3>Характеристики</h3>
        <p>Список характеристик</p>
      </div>
      <div id="replay">
        <h3>Отзывы</h3>
        <p>Форма отзыва и список отзывов</p>
      </div>
    </div>
  </div>

Вот так выглядят jQuery Tabs без стилей и скриптов:

 

CSS стили для jQuery Tabs

Со стилями для jQuery Tabs тут каждый может делать как желает. Есть момент с отображением блоков с содержимым, их я решил не скрывать с помощью стилей, а сделать это через скрипт. Для этого есть причина, на случай, если скрипт не загрузился или пользователь отключил поддержку скриптов в своем браузере, содержимое jQuery Tabs будет отображено и наши вкладки будут функционировать, как обычные якорные ссылки.

В своем примере я решил сделать минимальную стилизацию, чтобы не усложнять саму задачу реализации jQuery Tabs.
Нам необходимо, с помощью стилей, выстроить список ссылок (вкладок) в одну строку и дать всему целостный вид.

/* Tabs */
#tabs {border: 1px solid #ccc; border-radius: 8px}
#tabs .tabs {overflow: hidden; border-bottom: 1px solid #ccc}
#tabs .tabs li {float: left;}
#tabs .tabs li + li {border-left: 1px solid #ccc}
#tabs .tabs li a {display: block; padding: 8px 16px; font-size: 18px; line-height: 21px; color: #999;}
#tabs .tabs li a.active,
#tabs .tabs li a:hover {color: #369;}

#tabs .tabs-content {padding: 20px; font-size: 16px; line-height: 21px;}

[alert-announce]Не забудьте очистить элементы списка от вывода маркеров по-умолчанию: ul,li {list-style:none;}[/alert-announce]

Вот буквально 8 строк кода и наши вкладки приняли узнаваемый вид. Продолжим 🙂

Скрипт jQuery Tabs

Последний шаг - это написание небольшого скрипта для того, чтобы наши вкладки смогли работать корректно.
Нам нужно сделать:
1. Спрятать весь контент и отобразить контент первой вкладки (об этом я писал выше, что контент вкладок мы скрываем скриптом, а не стилями);
2. Привязать событие клик по вкладкам, при котором нажатая вкладка становится активной (добавляется класс active) и отображается содержимое вкладки.
Вот и все задачи.

$(document).ready(function(){
    var tabs = $('#tabs');
    $('.tabs-content > div', tabs).each(function(i){
        if ( i != 0 ) $(this).hide(0);
    });
    tabs.on('click', '.tabs a', function(e){
        /* Предотвращаем стандартную обработку клика по ссылке */
        e.preventDefault();

        /* Узнаем значения ID блока, который нужно отобразить */
        var tabId = $(this).attr('href');

        /* Удаляем все классы у якорей и ставим active текущей вкладке */
        $('.tabs a',tabs).removeClass();
        $(this).addClass('active');

        /* Прячем содержимое всех вкладок и отображаем содержимое нажатой */
        $('.tabs-content > div', tabs).hide(0);
        $(tabId).show();
    });
});

Код скрипта для jQuery вкладок постарался детально прокомментировать, но если у вас все же остались вопросы пишите их в комментах, буду рад помочь 😉

 

 

Метки: jQuery, jQuery tabs

Рубрика: jQuery