Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.
Есть вариант сделать табы только с помощю HTML и CSS.
Содержание
Вариант вкладок на чистом Javascript
Решение 1. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1.
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>
<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; }
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');
}
});
}
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!-- 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> |
Примеры вкладок на JavaScript: Подборка
See the Pen
CSS TABS by Ramnek Singh (@Ramnk7)
on CodePen.
See the Pen
Expanding flex cards by Zed Dash (@z-)
on CodePen.
See the Pen
Tabs [JavaScript] by Huong (@huongbt)
on CodePen.
See the Pen
Tabs javascript by Jessica Aiskel (@myjessijess)
on CodePen.
See the Pen
Multiple Tabs Javascript by Trevor Bradley (@trevor3999)
on CodePen.
See the Pen
tabs / JavaScript by Ed (@livehighvu06)
on CodePen.
See the Pen
Beautiful Tabs System with JS by AJAY KARAN SHARMA (@Ajaykaransharma)
on CodePen.