Для улучшения восприятия вашего контента пользователем, его можно разбить по вкладкам. В основном вкладки они повсеместно используются в интернет магазинах на странице товара, для компактного отображения Описания, Характеристик и Отзывов.
Но никто вас не ограничивает в области использования вкладок, главное знать как они создаются, о чем мы сегодня и поговорим 
Основная особенность вкладок - это их функциональность. Для пользователя видны все названия вкладок, но при этом отображается содержимое только одной, активной-текущей вкладки.
Для реализации этого функционала наших вкладок мы будем использовать библиотеку jQuery.
HTML структура jQuery Tabs
Структурно наши вкладки представляют из себя список из якорных ссылок и блоки с контентом.
04 | <li class="tab active"><a href="#description" class="active">Описание</a></li> |
05 | <li class="tab"><a href="#params">Характеристики</a></li> |
06 | <li class="tab"><a href="#replay">Отзывы</a></li> |
09 | <div class="tabs-content"> |
10 | <div id="description"> |
12 | <p>Текст описания товара </p> |
15 | <h3>Характеристики</h3> |
16 | <p>Список характеристик</p> |
20 | <p>Форма отзыва и список отзывов</p> |
Вот так выглядят jQuery Tabs без стилей и скриптов:
CSS стили для jQuery Tabs
Со стилями для jQuery Tabs тут каждый может делать как желает. Есть момент с отображением блоков с содержимым, их я решил не скрывать с помощью стилей, а сделать это через скрипт. Для этого есть причина, на случай, если скрипт не загрузился или пользователь отключил поддержку скриптов в своем браузере, содержимое jQuery Tabs будет отображено и наши вкладки будут функционировать, как обычные якорные ссылки.
В своем примере я решил сделать минимальную стилизацию, чтобы не усложнять саму задачу реализации jQuery Tabs.
Нам необходимо, с помощью стилей, выстроить список ссылок (вкладок) в одну строку и дать всему целостный вид.
02 | #tabs {border: 1px solid #ccc; border-radius: 8px} |
03 | #tabs .tabs {overflow: hidden; border-bottom: 1px solid #ccc} |
04 | #tabs .tabs li {float: left;} |
05 | #tabs .tabs li + li {border-left: 1px solid #ccc} |
06 | #tabs .tabs li a {display: block; padding: 8px 16px; font-size: 18px; line-height: 21px; color: #999;} |
07 | #tabs .tabs li a.active, |
08 | #tabs .tabs li a:hover {color: #369;} |
10 | #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) и отображается содержимое вкладки.
Вот и все задачи.
01 | $(document).ready(function(){ |
02 | var tabs = $('#tabs'); |
03 | $('.tabs-content > div', tabs).each(function(i){ |
04 | if ( i != 0 ) $(this).hide(0); |
06 | tabs.on('click', '.tabs a', function(e){ |
11 | var tabId = $(this).attr('href'); |
14 | $('.tabs a',tabs).removeClass(); |
15 | $(this).addClass('active'); |
18 | $('.tabs-content > div', tabs).hide(0); |
Код скрипта для jQuery вкладок постарался детально прокомментировать, но если у вас все же остались вопросы пишите их в комментах, буду рад помочь 
(
9 голосов. Рейтинг:
4,56 из 5)
Загрузка...
Метки: jQuery, jQuery tabs
Рубрика: jQuery
(9 голосов. Рейтинг: 4,56 из 5)
Загрузка...
Дмитрий, добрый день!
Большое спасибо за размещенный материал. Сайт сделан хорошо.
Воспользовался данной идеей.
Добавил к #tabs .tabs
list-style-type: none; Иначе отображались в Chrome маркеры.
Здравствуйте, Андрей!
Спасибо за вашу правку, т.к. я действительно не вынес очистку маркеров для списка в код примера, он у меня прописан для демо страницы, еще раз спасибо!
Спасибо за хороший пример, как раз то что нужно для меня. Добавил сайт в закладки. Интересные статьи здесь.
Красная кнопка убила))
Спасибо за ваш отзыв, Виталий!
Кнопка еще та, я до конца доклацал )))
В хроме после первого клика по кнопке таба, перестают отображаться комментарии.
Подскажите что поправить. Спасибо!
Забыл уточнить. Это в Хроме и IE в Мазиле гуд.
(nikopolnews.net)
Добрый день, Владимир!
дайте ссылку на страницу или покажите код вашего примера
добрый. а если название вкладок ссылки?
Тут я не совсем понял ваш вопрос. Вкладки и так реализованы в виде ссылок. Это нормально
Можете скинуть ваш код или описать подробнее что вас интересует, постараюсь ответить.