CSS选项卡代码实践-优快云博客

本文链接：https://blog.youkuaiyun.com/boiaprogramfan0420/article/details/7459292

看到好多大型的网站都会有一些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>