<style type="text/css">
.tabHold{background-color:#bbb9b5; width:400px; height:26px; margin-left:18px; margin-top:9px; float:left;}
.tabHold_1{background-color:#bbb9b5; width:400px; height:26px; margin-left:18px; margin-top:6px; float:left;}
.tabmenu{width:100px; height:21px; text-align:center; font-family:Arial; font-size:13px; padding-top:3px; color:#FFFFFF; text-decoration:none; float:left; cursor:pointer;}
.tabmenu:hover{ background-color:#FFFFFF; width:100px; height:21px; text-align:center; padding-top:3px; font-family:Arial; font-size:13px; color:#000000; text-decoration:none; float:left;}
.tabContent{
color:#000000;
width:450px;
height:100px;
float:left;
display:none;
border:#CCCCCC solid 2px;
}
.DefaulttabContent{
color:#000000;
width:450px;
height:100px;
float:left;
display:block;
border:#CCCCCC solid 2px;
}
</style>
<script language="javascript">
function init(){
document.getElementById('tabmenu1').style.background='#FFFFFF';
document.getElementById('tabmenu1').style.color='#000000';
document.getElementById('tab1').style.display='block';
}
function onClickShow(TabNo,totTab){
var i=1;
for(i=1;i<=totTab;i++){
if(i==TabNo){
document.getElementById('tabmenu'+TabNo).style.background='#FFFFFF';
document.getElementById('tabmenu'+TabNo).style.color='#000000';
document.getElementById('tab'+TabNo).style.display='block';
}else{
document.getElementById('tabmenu'+i).style.background='#bbb9b5';
document.getElementById('tabmenu'+i).style.color='#FFFFFF';
document.getElementById('tab'+i).style.display='none';
}
}
}
window.onload(init());
</script>
</head>
<body>
<div style="width:450px; float:left; border:#000000 solid 2px;">
<div align="left" class="tabHold">
<span class="tabmenu" onclick="onClickShow('1','8')" id="tabmenu1">Tab1</span>
<span class="tabmenu" onclick="onClickShow('2','8')" id="tabmenu2">Tab2</span>
<span class="tabmenu" onclick="onClickShow('3','8')" id="tabmenu3">Tab3</span>
<span class="tabmenu" onclick="onClickShow('4','8')" id="tabmenu4">Tab4</span>
</div>
<div align="left" class="tabHold_1">
<span class="tabmenu" onclick="onClickShow('5','8')" id="tabmenu5">Tab5</span>
<span class="tabmenu" onclick="onClickShow('6','8')" id="tabmenu6">Tab6</span>
<span class="tabmenu" onclick="onClickShow('7','8')" id="tabmenu7">Tab7</span>
<span class="tabmenu" onclick="onClickShow('8','8')" id="tabmenu8">Tab8</span>
</div>
<div class="DefaulttabContent" id="tab1">Text in Default Tab</div>
<div class="tabContent" id="tab2">Text in Tab2</div>
<div class="tabContent" id="tab3">Text in Tab3</div>
<div class="tabContent" id="tab4">Text in Tab4</div>
<div class="tabContent" id="tab5">Text in Tab5</div>
<div class="tabContent" id="tab6">Text in Tab6</div>
<div class="tabContent" id="tab7">Text in Tab7</div>
<div class="tabContent" id="tab8">Text in Tab8</div>
</div>
Default page load :
Click on other tab :
