Вкладки (Табы) на JavaScript: Решение + Подборка примеров || WpCraft

Содержание

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

Есть вариант сделать табы только с помощю HTML и CSS.

Вариант вкладок на чистом 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');
}
});
}


<!-- Style CSS -->
<style>
.item {
	display: inline-block;
	padding: 10px;
	margin: 2px;
	
}
.item:hover { cursor: pointer; }

.item.active { background: #ff4b367a; }

.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; }
</style>

<!-- HTML -->
<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>

<!-- JavaScript -->
<script>
/* Табы */
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');
		}
    });
}

</script>

<style>

.item {

display: inline-block;

padding: 10px;

margin: 2px;

}

.item:hover { cursor: pointer; }

.item.active { background: #ff4b367a; }

.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; }

</style>

<div class="item" id="item-3">JavaScript</div>

</div>

<div class="item-content" id="item-3-content">Код JavaScript</div>

</div>

/* Табы */

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');

}

});

}

</script>

Код №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