灰色风格的漂亮TAB选项卡

脚本代码

<!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(/Pri_upfile/jspic/2010/tabsepbg.gif) repeat-x 0 1px;padding-left:5px;overflow:visible;
}
.goods-detail-tab div{
cursor:pointer;background:url(/Pri_upfile/jspic/2010/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(/Pri_upfile/jspic/2010/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" onclick="put_css(1)">
    	<span>商品详情</span>
    </div>
	<div class="goodsDetailTab" onclick="put_css(2)">
    	<span>购买咨询</span>
    </div>
	<div class="goodsDetailTab" onclick="put_css(3)">
    	<span>商品评论</span>
    </div>
</div>
<div class="clear"></div>
<div id="ka">
    <div style="">asdfsdf</div>
    <div style="">123213</div>
    <div style="">VVVV</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(id){
	for(var k=0;k<tab.length;k++){
		if(id-1 == k){
			tab[k].className = 'goodsDetailTab active';
			kbs[k].style.display = 'block';
		}else{
			tab[k].className = 'goodsDetailTab';
			kbs[k].style.display = 'none';
		}
	}
}
put_css(1);
</script>

当前页面所处路径为共享世纪 / 脚本特效 / 菜单导航 / ，本特效的Tag为：选项卡 tab 共享世纪

灰色风格的漂亮TAB选项卡

会员登陆X