Dhaka is the capital of BD
London is the Capital of England.
Tokyo is the Capital of Japan.
<div class="showcontent">
<h3>Click the below buttons and See how to use tab button</h3>
<div class="btnclass">
<button class="btn" onclick="myFun('Dhaka',event)" id="default">Dhaka</button>
<button class="btn" onclick="myFun('London',event)">London</button>
<button class="btn" onclick="myFun('Tokyo',event)">Tokyo</button>
</div>
<div class="tabcontent" id="Dhaka">
<h2>Dhaka</h2>
<p>Dhaka is the capital of BD</p>
</div>
<div class="tabcontent" id="London">
<h2>London</h2>
<p>London is the Capital of England.</p>
</div>
<div class="tabcontent" id="Tokyo">
<h2>Tokyo</h2>
<p>Tokyo is the Capital of Japan.</p>
</div>
</div>
function myFun(cityname,event){
let cont=document.querySelectorAll(".tabcontent");
for(let i=0;i< cont.length;i++){
cont[i].style.display="none";
}
let btnlist=document.querySelectorAll(".btn");
for(let i=0;i< btnlist.length;i++){
btnlist[i].className=btnlist[i].className.replace(" show","");
}
document.getElementById(cityname).style.display="block";
event.target.className+=" show";
}
document.getElementById("default").click();
.btnclass{
overflow: hidden;
border-radius: 5px;
}
.showcontent button{
float:left;
border: none;
padding: 12px 16px;
font-size: 17px;
cursor: pointer;
background-color: #ddd;
}
.showcontent button:hover{
background-color: #bbb;
color: black;
}
.tabcontent{
padding: 12px 16px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}
.showcontent .show{
background-color: dodgerblue;
color: white;
}