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

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

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

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

Пример №1: Табы на чистом JS
HTML
CSS
JavaScript
<div id="tabs-block"> <div id="tabs">
<div class="item active" id="item-1">HTML</div>
<div class="item" id="item-2">CSS</div>
<div class="item" id="item-3">JavaScript</div>
</div>
<div class="tabs-content">
<div class="item-content active" id="item-1-content">Код HTML</div>
<div class="item-content" id="item-2-content">Код CSS</div>
<div class="item-content" id="item-3-content">Код JavaScript</div>
</div>
</div>
.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');
}
});
}
Код №1: Вкладки на чистом JavaScript

Примеры вкладок на JavaScript: Подборка

See the Pen
CSS TABS
by Ramnek Singh (@Ramnk7)
on CodePen.

Пример 2.1: Красивые вкладки-меню для мобильных на JS

See the Pen
Expanding flex cards
by Zed Dash (@z-)
on CodePen.

Пример 2.2: Расширяющиеся гибкие карты на jQuery


See the Pen
Tabs [JavaScript]
by Huong (@huongbt)
on CodePen.

Пример 2.3: Простые табы на Javascript

See the Pen
Tabs javascript
by Jessica Aiskel (@myjessijess)
on CodePen.

Пример 2.4: Табы в классическом стиле на Javascript

See the Pen
Multiple Tabs Javascript
by Trevor Bradley (@trevor3999)
on CodePen.

Пример 2.5: Несколько вкладок на JS

See the Pen
tabs / JavaScript
by Ed (@livehighvu06)
on CodePen.

Пример 2.6: Несколько тобов на JS

See the Pen
Beautiful Tabs System with JS
by AJAY KARAN SHARMA (@Ajaykaransharma)
on CodePen.

Пример 2.7: Выпадающие табы на Javascript
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии