Vaska,
тоже самое без dataset, изначально добавьте правильно все классы active.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.tab-content>div {
display: none;
}
.tab-content>div.active {
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 class="active tab">Home</li>
<li class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div class="active">
<h1>Home 1</h1>
<p>This is the home 1</p>
</div>
<div id="pricing1">
<h1>Pricing 1</h1>
<p>Some information on pricing 1</p>
</div>
</div>
<ul class="tabs">
<li class="active tab">Home</li>
<li class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div class="active">
<h1>Home 2</h1>
<p>This is the home 2</p>
</div>
<div>
<h1>Pricing 2</h1>
<p>Some information on pricing 2</p>
</div>
</div>
<ul class="tabs">
<li class="active tab">Home</li>
<li class="tab">Pricing</li>
</ul>
<div class="tab-content">
<div class="active">
<h1>Home 3</h1>
<p>This is the home 3</p>
</div>
<div>
<h1>Pricing 3</h1>
<p>Some information on pricing 3</p>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tabs');
const content = document.querySelectorAll('.tab-content');
tabs.forEach((tab, i) => {
tab.addEventListener('click', ({
target
}) => {
if (target = target.closest('li')) {
let active = tab.querySelector('.active');
active.classList.remove('active');
content[i].querySelector('.active').classList.remove('active');
let index = [...tab.querySelectorAll('li')].indexOf(target);
target.classList.add('active');
content[i].children[index].classList.add('active');
}
})
})
</script>
</body>
</html>