<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
 body
 {
  padding:50px;margin:0;
  color:#666;
  font:12px arial,sans-serif;
 }
 .tabT {position:relative;width:400px;padding:0;margin:0px;background:#ddd url(http://www.bluekevin.com/demo/1.jpg) repeat-x bottom;}

 .tab ,.tab li{padding:0;margin:0;border:none}
 .tab{height:23px;display:block;width:400px;}
 .tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
 .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-top:1px solid red;padding:2px 20px;}

 .show,hidden{width:398px;margin-top:0px;border-right:1px solid red;border-bottom:1px solid red;border-left:1px solid red;text-align:left;}
 .hidden{display:none;}
 .show{display:block;}
 .con {padding:10px;}
 .tabMore{position:absolute;right:10px;top:5px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
 var len =document.getElementById('getId').getElementsByTagName('li').length;
 for(i=1; i <= len; i++){
  if ("tabId"+i==tabId){
   document.getElementById(tabId).className="current";
  }else{
   document.getElementById("tabId"+i).className="";
  }
  if ("tabC"+i==tabC){
   document.getElementById(tabC).className="show";
  }else{
   document.getElementById("tabC"+i).className="hidden";
  }
 }
}


 //-->
 </script>
</head>

<body >
<div id="getId">
<div class="tabT">
 <ul class="tab">
   <li id="tabId1" class="current" onmouseover="tab('tabId1','tabC1');">tab 1</li>
   <li id="tabId2" onmouseover="tab('tabId2','tabC2');">tab2</li>
   <li id="tabId3" onmouseover="tab('tabId3','tabC3');">tab3</li>
   <li id="tabId4" onmouseover="tab('tabId4','tabC4');">tab4</li>
 </ul>
 <span class="tabMore"><a href="">more</a></span>
</div>
<div class="show" id="tabC1">
 <div class="con">
  1111111111111111111
 </div>
</div>
<div class="hidden" id="tabC2">
 <div class="con">
  2
 </div>
</div>
<div class="hidden" id="tabC3">
 <div class="con">
  3
 </div>
</div>
<div class="hidden" id="tabC4">
 <div class="con">
  4
 </div>
</div>
</div>

</body>

</html>