看到好多大型的网站都会有一些tab选项卡,所以今天就写了一个供大家参考,代码简洁明了,不需要太多的解释,只需要注意一下兼容性问题就行了。看代码
<html>
<head>
<title>css选项卡练习</title>
<style>
div{width:565px;height:220px;}
div.tabcard .nav{background-color:#ff359a;width:565px;height:21px;}
.nav a{text-decoration:none;float:left;text-align:center;width:140px;height:20px;
color:#000;margin-top:1px;margin-left:1px;background-color:white;border-bottom:1px solid #ff359a}
div.content{border:1px solid #ff359a;border-top:0;width:561px;height:200px;padding:1px;}
</style>
<script type="text/javascript">
function tabCard(e)
{
var e = window.event?window.event.srcElement:e.target;
document.getElementById("content").innerHTML = e.innerHTML;
for(i=0;i<4;i++)
{
document.getElementsByTagName("a")[i].style.borderBottom = "1px solid #ff359a";
}
e.style.cssText = 'border-bottom:none';
e.blur(); //Chrome和Opera不需要
}
</script>
</head>
<body>
<div class="tabcard">
<div class="nav" id="nav" onclick="tabCard(event); return false;">
<a href="#" class="bairen">拜仁慕尼黑</a>
<a href="#" class="duote">多特蒙德</a>
<a href="#" class="situ">斯图加特</a>
<a href="#" class="shaerke">沙尔克04</a>
</div>
<div class="content" id="content"></div>
</div>
</body>
</html>
