Tabs in html javascript

Табы на JQuery и JavaScript

Сегодня разберем как делаются вкладки ( табы) на JQuery и JavaScript .

Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery, ниже JavaScript.

В самом начале объясню схему, по которой мы будем делать табы:

1. Добавим вкладкам и блокам с их содержимым классы с приставкой js- для обращения к ним из JavaScript.
2. Добавим data атрибут data-tab для идентификации наших табов. Некоторые делают табы по индексу элемента в dom-дереве, я так делать не буду, это не гибкая конструкция.
3. При клике на вкладку, удалим активный класс у всех вкладок, добавим той, по которой кликнули, удалим активный класс у всех блоков с содержимым и добавим тому, у которого значение атрибута data-tab такое же как у атрибута data-tab нашей вкладки.

Про приставку js.
Мы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.

В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.

Первым делом создадим разметку для наших табов.

Первой вкладке и её содержимому мы добавили класс active, чтобы по-умолчанию эти два элемента были активны. Остальные вкладки оставляем неактивными, а блоки с контентом скрываем.

.tabs < width: 100%; max-width: 500px; >/* Стили для списка вкладок */ .tab-header < list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: flex-start; margin: 0; >/* Стили для вкладки */ .tab-header__item < padding: 10px 20px; margin-right: 5px; cursor: pointer; border: 1px solid #ddd; >/* Стили для активной вкладки */ .tab-header__item.active < color: red; border-bottom: none; position: relative; background-color: #fff; >/* Стиль для списка контейнеров с содержимым вкладок */ .tab-content < list-style: none; padding: 0; margin: 0; >/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */ .tab-content__item < display: none; padding: 20px; border: 1px solid #ddd; margin-top: -1px; >/* Стили для активного контейнера вкладки */ .tab-content__item.active

Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.

Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.

Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.

Разберем Jquery код:

Итак, первое что нужно сделать, обработак клик по каждому элементу.

$('.js-tab-trigger').click(function() < // клик! >)

Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.

$('.js-tab-trigger').click(function() < var // 1 content = $('.js-tab-content[data-tab="'+ id +'"]'); // 2 >); 

Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.

 $('.js-tab-trigger').click(function() < var content = $('.js-tab-content[data-tab="'+ id +'"]'); $('.js-tab-trigger.active').removeClass('active'); // 1 $(this).addClass('active'); // 2 $('.js-tab-content.active').removeClass('active'); // 3 content.addClass('active'); // 4 >);

1. Удалили класс active у активной вкладки
2. Добавили класс active вкладке по которой кликнули
3. Удалили класс active у активного контейнера с содержимым
4. Добавили класс active контейнеру который должен быть активным

Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.

Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.

Разберем JavaScript код:

Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.

var jsTriggers = document.querySelectorAll('.js-tab-trigger'), jsContents = document.querySelectorAll('.js-tab-content');

Теперь можно обработать клик по вкладкам.

jsTriggers.forEach(function(trigger) < // 1 trigger.addEventListener('click', function() < // 2 // клик! >); >);

1. Циклом перебираем элементы в массива. В массиве у нас лежат dom-элементы, то есть наши вкладки.
2. Каждому элементу добавляем функцию-обработчик при событии клика.

Теперь в функции-обработчике объявим несколько переменных для удобной манипуляции. Все можно сделать и без переменных, но мы будем делать по-хорошему.

var // 1 content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'), // 2 activeTrigger = document.querySelector('.js-tab-trigger.active'), // 3 activeContent = document.querySelector('.js-tab-content.active'); // 4

1. Получаем идентификатор вкладки.
2. Ищем контейнер с таким же значением атрибута data-tab.
3. Ищем активную вкладку.
4. Ищем активный контейнер.

В заключении поработаем с классами:

var jsTriggers = document.querySelectorAll('.js-tab-trigger'), jsContents = document.querySelectorAll('.js-tab-content'); jsTriggers.forEach(function(trigger) < trigger.addEventListener('click', function() < var content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'), activeTrigger = document.querySelector('.js-tab-trigger.active'), activeContent = document.querySelector('.js-tab-content.active'); activeTrigger.classList.remove('active'); // 1 trigger.classList.add('active'); // 2 activeContent.classList.remove('active'); // 3 content.classList.add('active'); // 4 >); >);

1. Удалили класс active у активной вкладки
2. Добавили класс active вкладке по которой кликнули
3. Удалили класс active у активного блока с содержимым
4. Добавили класс active контейнеру который должен быть активным

Итоговый код

HTML

CSS

.tabs < width: 100%; max-width: 500px; >/* Стили для списка вкладок */ .tab-header < list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: flex-start; margin: 0; >/* Стили для вкладки */ .tab-header__item < padding: 10px 20px; margin-right: 5px; cursor: pointer; border: 1px solid #ddd; >/* Стили для активной вкладки */ .tab-header__item.active < color: red; border-bottom: none; position: relative; background-color: #fff; >/* Стиль для списка контейнеров с содержимым вкладок */ .tab-content < list-style: none; padding: 0; margin: 0; >/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */ .tab-content__item < display: none; padding: 20px; border: 1px solid #ddd; margin-top: -1px; >/* Стили для активного контейнера вкладки */ .tab-content__item.active

jQuery или

Не забудьте подключить библиотеку jQuery. Я подключаю через cdnjs — https://cdnjs.com/libraries/jquery

$('.js-tab-trigger').click(function() < var content = $('.js-tab-content[data-tab="'+ id +'"]'); $('.js-tab-trigger.active').removeClass('active'); $(this).addClass('active'); $('.js-tab-content.active').removeClass('active'); content.addClass('active'); >);

JavaScript

var jsTriggers = document.querySelectorAll('.js-tab-trigger'), jsContents = document.querySelectorAll('.js-tab-content'); jsTriggers.forEach(function(trigger) < trigger.addEventListener('click', function() < var content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'), activeTrigger = document.querySelector('.js-tab-trigger.active'), activeContent = document.querySelector('.js-tab-content.active'); activeTrigger.classList.remove('active'); trigger.classList.add('active'); activeContent.classList.remove('active'); content.classList.add('active'); >); >);

Источник

Вкладки (Табы) на JavaScript

Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.

Вариант вкладок на чистом Javascript

Решение 1. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1.

.item <
display: inline-block;
padding: 10px;
margin: 2px;
>
.item:hover < cursor: pointer; >
.item.active < background: #ffe42369; >
.item, .tabs-content <
border: 1px solid #b7b7b7;
border-radius: 3px;
>
.tabs-content <
padding: 1rem;
min-width: 320px;>
.item-content <
height: 0;
transition: .4s;
opacity: 0;
>
.item-content.active <
height: auto;
opacity: 1; >

/* Табы */
document.addEventListener(‘DOMContentLoaded’, clickTabs());
function clickTabs() var tabs = document.querySelector(‘#tabs’);
var item = document.querySelectorAll(‘.item’);
var itemContent = document.querySelectorAll(‘.item-content’);
tabs.addEventListener(«click», function (event) if (event.target.classList == ‘item’) for ( let i = 0; i < item.length; i++ )item[i].classList.remove('active');
itemContent[i].classList.remove(‘active’);
>
event.target.classList.add(‘active’);
let idItemContent = event.target.id + ‘-content’;
let iC = document.getElementById(idItemContent);
iC.classList.add(‘active’);
>
>);
>

Источник