Monday, January 4, 2010

Tab Menu in Javascript

Implement customize tab menu in single floor and multi floor in any language using javascript




<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 :

No comments:

Post a Comment