Как сделать табы на flexbox и jQuery

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на 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>

грубо говоря, наш код состоит из трех частей:

1. Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
2. В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
3. Содержимое табов, обернутое в класс «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».

Пример реализации, можно найти в этом уроке.