Як зробити таби на flexbox та jQuery

У цьому уроці розглянемо, як самостійно реалізувати дружні до SEO таби на 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-атрибуті «data-tabs».
2. Самі таби (вкладки), де кожна має своє ім’я, задане у властивості «data-tab-item». Значення цього атрибута має відповідати одному з «data-tab-content» у блоках вмісту табів.
3. Вміст табів, обгорнутий у блок з класом «tab-contents». Кожен блок має атрибут «data-tab-content», і його значення повинно відповідати одному з «data-tab-item». Ці атрибути використовуються для зв’язку між табами та їх вмістом.

CSS код

Друге. Скомпільований SCSS у CSS у BEM-стилі:

/** 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 — вміст конкретної вкладки

Безпосередньо реалізація flex табів знаходиться в цій частині:

.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».

Приклад реалізації можна переглянути в цьому уроці.