Вот маленький и очень простой скриптик, взятый с
www.w3schools.com<html>
<head>
<style>
body{background:white;color:white;font-family:arial;}
div{position:relative;float:left;}
.tab{border:1px solid gray;}
.tab button{float:left;padding:14px 16px;transition:0.2s;}
.tab button:hover{background:#ddd;}
.tab button.active{background:salmon;}
.tabcontent{display:none;padding:6px;12px;}
#London{background:palegoldenrod;}
#Paris{background:plum;}
#Tokio{background:aqua;}
</style>
</head>
<body>
<div class="tab">
<button class = "tablinks active" onclick = "openCity(event,'London')">London</button>
<button class = "tablincks"onclick = "openCity(event,'Paris')">Paris</button>
<button class = "tablinks"onclick = "openCity(event,'Tokio')">Tokio</button>
</div>
<div id = "London" class = "tabcontent">
<h3>London</h3>
<p>is the capital of GB</p>
</div>
<div id ="Paris" class = "tabcontent">
<h3>Paris</h3>
<p> is the capital of Franсe </p>
</div>
<div id="Tokio"class = "tabcontent">
<h3>Tokio</h3>
<p> is the capital of Japonese</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Он не идеален, но для обучения вполне годный )
Простой
Средний