Tab list box


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style id="ss" rel="stylesheet" type="text/css">
#tabs { 
  float:left; 
  position:relative;
  width:455px; 
  margin-bottom:10px;
}
#tabs #buttons { 
  position:absolute; 
  top:0; left:0; 
  width:150px;
  margin:0; padding:0;
  background-color:#ddd; 
  color:#888; 
  border-top:1px solid #999;
  list-style:none;
}
#tabs #buttons li { 
  border-bottom:1px solid #999; 
  border-left:1px solid #999;
}
#tabs #buttons a {
  text-decoration:none;
  color:#888; 
  display:block; 
  border-right:1px solid #999;
  padding:5px;
}
#tabs #buttons a:hover { background-color:#eee; }
#tabs #buttons a.selected { 
  color:black; 
  background-color:#FDE9F0; 
  border-right-width:0px;
}
#tabs #buttons a.selected:hover { background-color:#FDE9F0; }

#tabs .infobox {
  margin-left:150px;
  padding:6px 12px;
  border:1px solid #999;
  border-left-width:0px;
  background-color:#FDE9F0;
  display:none;
}
#tabs .enabled { display:block; }
#tabs .infobox ul { margin-left:20px; padding-left:0px; }
</style>
<script language="JavaScript" type="text/javascript">
function selectTab(num) {
  for (var i=1; i <= 4; i++) {
    document.getElementById("tab" + i).className = "";
    document.getElementById("box" + i).className = "infobox";
  }
  document.getElementById("tab" + num).className = "selected";
  document.getElementById("box" + num).className = "infobox enabled";
}
</script>
</head>

<body onload="selectTab(1);">
  <div id="tabs"> 
      
    <ul id="buttons">
        
      <li><a href="#" id="tab1" onclick="selectTab(1); return false;" onfocus="blur();">Tab 1</a></li>
      <li><a href="#" id="tab2" onclick="selectTab(2); return false;" onfocus="blur();">Tab 2</a></li>
      <li><a href="#" id="tab3" onclick="selectTab(3); return false;" onfocus="blur();">Tab 3</a></li>
      <li><a href="#" id="tab4" onclick="selectTab(4); return false;" onfocus="blur();">Tab 4</a></li>
    </ul>
    <div id="box1" class="infobox"> 
        
      <p>such as:</p>
      <ul>
          
        <li>N</li>
        <li>M</li>
        <li>A</li>
        <li>F</li>
        <li>A</li>
      </ul>
    </div>
    <div id="box2" class="infobox"> 
        
      <p>box 2 <BR/><BR/><BR/><BR/><BR/><BR/></p>
    </div>
    <div id="box3" class="infobox">
        
      <p>this is a test. this is a test. </p>
      <ul>
        <li>H</li>
        <li>W</li>
        <li>E</li>
        <li>S</li>
      </ul>
    </div>
    <div id="box4" class="infobox"> 
        
      <p>this is a test. this is a test. </p>
      <p>this is a test. this is a test. </p>
    </div>
  </div>
  </div>
</body>
</html>
Tab list box : tab : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » tab »

Tab list box

HTML CSS TUTORIALS
