<!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=gb2312" />
<title>css2实现选项卡效果</title>
<style>
*{ margin:0; padding:0;}
ul,li{list-style:none;}
.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}
.box li{float:left;width:200px;text-align:center;position:relative;z-index:2;}
.box li em{width:0;height:0;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;}
.box li i{width:0;height:0;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;}
.box li.current{background:#933;z-index:1;color:#fff;}
.box li.current i{border-color:transparent transparent transparent #933;}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li>选项卡1<em></em><i></i></li>
<li class="current">选项卡2<em></em><i></i></li>
<li>选项卡3<em></em><i></i></li>
</ul>
</div>
<script>
function gid(objectId) {return document.getElementById(objectId);}
function addEvt(tab){
var ctab = gid(tab).getElementsByTagName('li');
for(var i = 0;i<ctab.length;i++)
{
ctab[i].onclick =function std(){
for(var i = 0;i<ctab.length;i++){
ctab[i].className="";
}
this.className="current";
}
}
}
addEvt("box");
</script>
</body>
</html>
