一个菜单

代码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div + CSS 选项卡</title>
<style type="text/css">
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
* html .clearfix, * html { height:1%; }
.clearfix { display:block; }
.clear { border-top:1px solid transparent!important; border-top:0; clear:both; line-height:0; font-size:0; height:0; height:1%; }
.goods-detail-tab { margin:30px 0 0 0; background:url(images/tabsepbg.gif) repeat-x 0 1px; padding-left:5px; overflow:visible; }
.goods-detail-tab div { cursor:pointer; background:url(images/tabs_common.gif) no-repeat; color:#666; display:block; float:left; height:17px; padding:4px 2px; text-align:center; width:91px; }
.goods-detail-tab .active { background:url(images/tabs_on.gif) no-repeat; color:#000; display:block; font-size:14px; font-weight:bold; height:28px; position:relative; margin-bottom:-4px; margin-top:-8px; padding-top:6px; width:117px; }
</style>
</head>
<body>
<div class="goods-detail-tab clearfix" id="tabs">
  <div class="goodsDetailTab active">商品详情</div>
  <div class="goodsDetailTab">购买咨询</div>
  <div class="goodsDetailTab">商品评论</div>
</div>
<div class="clear"></div>
<div id="ka">
  <div>11111</div>
  <div>22222</div>
  <div>33333</div>
</div>
</body>
</html>
<script type="text/javascript">
var tab = document.getElementById('tabs').getElementsByTagName('div');
var kbs = document.getElementById('ka').getElementsByTagName('div');
function put_css(){    
    for(var i=0; i<tab.length; i++){
        tab[i].currentI = i;
        kbs[i].style.display = i == 0 ? "block" : "none";
        tab[i].onclick = function(){
             //alert(this.currentI);
             //alert(i);             
             for(var j=0; j<kbs.length; j++){                 
                 kbs[j].style.display = "none";
                 if(j == this.currentI){
                     kbs[this.currentI].style.display = "block";                    
                 } 
                 tab[j].className = 'goodsDetailTab';                 
             }    
             tab[this.currentI].className = 'goodsDetailTab active';             
        }
        
    }
}
put_css();
//put_css(1);
</script>