<html>
<head>
<style>
.tab {
border: 1px solid #ccc;
background-color: #f1f1f1;
height:500px;
text-align:center;
width:610px;
position:relative;
}
.myTab{
bolder: 1px solid red;
height: 50px;
width: 200px;
background-color: gray;
display: inline-block;
text-align:center;
font-size:30px;
}
.myTab:hover{
background-color:blue;
color:white;
}
.tabContent{
position:absolute;
display:none;
}
</style>
<script>
function OpenTab(elm,tabName){
var i;
var tabContent=document.getElementsByClassName("tabContent");
for(i = 0;i<tabContent.length;i++){
tabContent[i].style.display="none";
}
var myTab=document.getElementsByClassName("myTab");
for(i = 0;i<tabContent.length;i++){
myTab[i].style.background="gray";
}
var getTab = document.getElementById(tabName);
getTab.style.display="block";
elm.style.background="red";
}


</script>

</head>
<body>
<div class="tab">
<a class="myTab" href="#" onclick="OpenTab(this,'tab1')">Tab1</a>
<a class="myTab" href="#" onclick="OpenTab(this,'tab2')">Tab2</a>
<a class="myTab" href="#" onclick="OpenTab(this,'tab3')">Tab3</a>
<div id="tab1" class="tabContent">
<h1>Doan text h1 - Tab1<h1>
<h1>Doan text h1 - Tab1<h1>
<h1>Doan text h1 - Tab1<h1>
<h1>Doan text h1 - Tab1<h1>
</div>
<div id="tab2" class="tabContent">
<h1>Doan text h2 - Tab2<h1>
<h1>Doan text h2 - Tab2<h1>
<h1>Doan text h2 - Tab2<h1>
</div>
<div id="tab3" class="tabContent">
<h1>Doan text h3 - Tab3<h1>
</div>
</div>
</body>
</html>

Page 1 of 2