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;}

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

Вот буквально 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 вкладок постарался детально прокомментировать, но если у вас все же остались вопросы пишите их в комментах, буду рад помочь 😉

 

 

(9 голосов. Рейтинг: 4,56 из 5)
Загрузка...

Метки: ,

Рубрика: jQuery

Комментарии (8)

| RSS комментария

  1. Дмитрий, добрый день!
    Большое спасибо за размещенный материал. Сайт сделан хорошо.
    Воспользовался данной идеей.

    Добавил к #tabs .tabs
    list-style-type: none; Иначе отображались в Chrome маркеры.

    • Дмитрий Британ:

      Здравствуйте, Андрей!
      Спасибо за вашу правку, т.к. я действительно не вынес очистку маркеров для списка в код примера, он у меня прописан для демо страницы, еще раз спасибо! 🙂

  2. Vitaly:

    Спасибо за хороший пример, как раз то что нужно для меня. Добавил сайт в закладки. Интересные статьи здесь.
    Красная кнопка убила))

    • Дмитрий Британ:

      Спасибо за ваш отзыв, Виталий!
      Кнопка еще та, я до конца доклацал )))

  3. Владимир:

    В хроме после первого клика по кнопке таба, перестают отображаться комментарии.
    Подскажите что поправить. Спасибо!
    Забыл уточнить. Это в Хроме и IE в Мазиле гуд.
    (nikopolnews.net)

    • Дмитрий Британ:

      Добрый день, Владимир!
      дайте ссылку на страницу или покажите код вашего примера

  4. Ивак:

    добрый. а если название вкладок ссылки?

    • Дмитрий Британ:

      Тут я не совсем понял ваш вопрос. Вкладки и так реализованы в виде ссылок. Это нормально 🙂
      Можете скинуть ваш код или описать подробнее что вас интересует, постараюсь ответить.

Оставьте свой комментарий