Vaska,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
[data-tab-content] {
display: none;
}
.active[data-tab-content] {
display: block;
}
body {
padding: 0;
margin: 0;
}
.tabs {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
.tab {
cursor: pointer;
padding: 10px;
}
.tab.active {
background-color: #CCC;
}
.tab:hover {
background-color: #AAA;
}
.tab-content {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<ul class="tabs">
<li data-tab-target="#home1" class="active tab">Home</li>
<li data-tab-target="#pricing1" class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div id="home1" data-tab-content class="active">
<h1>Home 1</h1>
<p>This is the home 1</p>
</div>
<div id="pricing1" data-tab-content>
<h1>Pricing 1</h1>
<p>Some information on pricing 1</p>
</div>
</div>
<ul class="tabs">
<li data-tab-target="#home2" class="active tab">Home</li>
<li data-tab-target="#pricing2" class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div id="home2" data-tab-content class="active">
<h1>Home 2</h1>
<p>This is the home 2</p>
</div>
<div id="pricing2" data-tab-content>
<h1>Pricing 2</h1>
<p>Some information on pricing 2</p>
</div>
</div>
<ul class="tabs">
<li data-tab-target="#home3" class="active tab">Home</li>
<li data-tab-target="#pricing3" class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div id="home3" data-tab-content class="active">
<h1>Home 3</h1>
<p>This is the home 3</p>
</div>
<div id="pricing3" data-tab-content>
<h1>Pricing 3</h1>
<p>Some information on pricing 3</p>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tabs');
tabs.forEach(tab => {
tab.addEventListener('click', ({
target
}) => {
if (target = target.closest('[data-tab-target]')) {
let active = tab.querySelector('.active');
let id = active.dataset.tabTarget;
active.classList.remove('active');
document.querySelector(id).classList.remove('active');
id = target.dataset.tabTarget;
document.querySelector(id).classList.add('active');
target.classList.add('active');
}
})
})
</script>
</body>
</html>
|
Сообщение от Vaska
|
|
Или подскажите другой скрипт, который умеет делать то, что я выше написал.
|
форум - поиск -
открывашка