Содержимое
В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на flex и jQuery.
Наш код будет разделен на три части.
HTML код
Первое. HTML код без которого никуда:
<div class="tabs" data-tabs="name"> <ul class="tab-items"> <li class="tab__item active" data-tab-item="tab-item-1"> Вкладка 1 </li> <li class="tab__item" data-tab-item="tab-item-2"> Вкладка 2 </li> <li class="tab__item" data-tab-item="tab-item-3"> Вкладка 3 </li> </ul> <div class="tab-contents"> <div class="tab__content active" data-tab-content="tab-item-1"> Содержимое вкладки 1 </div> <div class="tab__content" data-tab-content="tab-item-2"> Содержимое вкладки 2 </div> <div class="tab__content" data-tab-content="tab-item-3"> Содержимое вкладки 3 </div> </div> </div>
грубо говоря, наш код состоит из трех частей:
- Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
- В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
- Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.
CSS код
Второе. Скомпилированный SCSS в CSS, в БЭМ стиле:
/** Tabs */ .tabs .tab-items { position: relative; display: inline-flex; list-style: none; margin: 0; border-bottom: 1px solid #e1e1e1; padding: 0 25px; } .tabs .tab__item { position: relative; top: 1px; color: #222222; font-weight: bold; font-size: 18px; text-align: center; letter-spacing: 1px; border: 1px solid #e1e1e1; border-right: none; background-color: #ebebeb; padding: 10px 20px; cursor: pointer; } .tabs .tab__item.active { color: #158100; border-top: 4px solid #158100; border-bottom: none; background-color: #fff; cursor: default; } .tabs .tab__item:hover { color: #158100; } .tabs .tab__item:last-child { border-right: 1px solid #e1e1e1; } .tabs .tab__content { display: none; } .tabs .tab__content.active { display: block; }
Выше можно выделить несколько составляющих:
- tabs — общий класс для всего компонента табов
- tab-items — обертка для табов
- tab-contents — обертка для содержимого табов
- tab__item — сам таб
- tab__content — содержимое одного таба
Сама флекс реализация табов реализована в данной части кода:
.tabs .tab-items { position: relative; display: inline-flex; list-style: none; margin: 0; border-bottom: 1px solid #e1e1e1; padding: 0 25px; }
Т.е. там где «display: inline-flex».
JavaScript код
Третье. Наш JavaScript код:
jQuery(document).ready(function($) { function siteTabs(tab) { var $Tabs = jQuery('[data-tabs="' + tab + '"]'); if($Tabs.length) { $Tabs.find('[data-tab-item]').click(function(e){ e.preventDefault(); $Tabs.find('[data-tab-item]').map(function(i, o){ jQuery(o).removeClass('active'); }); jQuery(this).addClass('active'); $Tabs.find('[data-tab-content]').map(function(i, o){ jQuery(o).removeClass('active'); }); $Tabs.find('[data-tab-content="' + jQuery(this).data('tab-item') + '"]').addClass('active'); }); } } siteTabs('name'); });
Что-бы не заморачиваться с реализацией jQuery плагина (нужно будет опубликовать про это статью!). Наш компонент реализован в виде простой ф-и «siteTabs()», принимающую единственный параметр — название группы табов (об этом ниже).Подробное описание листинга выше.
Ищем на странице табы с указанным именем в переменной «tab».
var $Tabs = jQuery('[data-tabs="' + tab + '"]');
Если такое есть, идем дальше. И «вешаем» событие «onclick», на все табы.
$Tabs.find('[data-tab-item]').click(function(e){ /* … */ });
Если был выполнен клик по вкладке таба, нам нужно:
$Tabs.find('[data-tab-item]').map(function(i, o){ jQuery(o).removeClass('active'); }); jQuery(this).addClass('active');
пройтись по всем вкладкам и удалить класс «active», помечающий ее активной. И добавить тот же класс к вкладке, по которой кликнули на данный момент.
Далее, то же нужно проделать и для содержимого вкладок:
$Tabs.find('[data-tab-content]').map(function(i, o){ jQuery(o).removeClass('active'); }); $Tabs.find('[data-tab-content="' + jQuery(this).data('tab-item') + '"]').addClass('active');
но что бы определить, содержимое какого таба отобразить. Нам нужно получить свойство «data-tab-item» с вкладки, найти его в свойствах «data-tab-content», и добавить класс «active».
Пример реализации, можно найти в этом уроке.