每个TAB颜色不同的网页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>
  <title>不同颜色选项卡</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: 12px/20px 'microsoft yahei', 'arial';
		word-break: break-all;
		word-wrap: break-word;
	}
	.clearfix:after {
		content: '.';
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	* html .clearfix {
		height: 1%;
	}
	.clearfix {
		display: block;
	}
	#wrap {
		width: 320px;
		margin: 2em auto;
	}
	.card_List {
		height: 30px;
		border-bottom: 1px solid #f00;
		position: relative;
	}
	.card_List li {
		float: left;
		width: 68px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		margin: 0 5px;
		display: inline;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.card_List li.current {
		height: 34px;
		line-height: 34px;
		margin-top: -4px;
		border: 1px solid #F00;
		background: #FF9494;
		border-bottom: none;
		color: #fff;
	}
	#oLi li:nth-child(1){
		background: #FF9494;
	}
	#oLi li:nth-child(2){
		background: #8CFE8C;
	}
	#oLi li:nth-child(3){
		background: #6969FB;
	}
	#oLi li:nth-child(4){
		background: #FFE26F;
	}
	.card_content div {
		display: none;
		height: 100px;
		text-align: center;
		color: white;
	}
	.card_content div:first-child {
		background: #FF9494;
	}
  </style>
  <script type="text/javascript">
	window.onload = function () {
		var colorArr = {
			0:"#f00",
			1:"#0f0",
			2:"#00f",
			3:"#FC0"
		};
		var bgColorArr = {
			0:"#FF9494",
			1:"#8CFE8C",
			2:"#6969FB",
			3:"#FFE26F",
		}
		var oL = document.getElementById("oLi");
		var oLi = oL.getElementsByTagName("li");
		var oUl = document.getElementById("oUl").getElementsByTagName("div");
		for ( var i=0 ; i<oLi.length ; i++ ){
			oLi[i].index = i;
			oLi[i].onclick = function () {
				for ( var j = 0 ; j < oLi.length ; j++ ){
					oLi[j].className = "";
					oLi[j].style.border = "none";
				}
				this.className = "current";
				this.style.border = "1px solid " + colorArr[this.index];
				this.style.borderBottom = "none";
				oL.style.borderBottom = "1px solid " + colorArr[this.index];
				for ( var j=0 ; j < oUl.length ; j++ ){
					oUl[j].style.display = "none";
					oUl[this.index].style.display = "block";
					oUl[j].style.backgroundColor = bgColorArr[this.index];
				}
			};
		}
	};
  </script>
 </head>

 <body>
	<div id="wrap">
		<ul id="oLi" class="card_List clearfix">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<div id="oUl" class="card_content">
			<div style="display:block;">
				11111111111111
			</div>
			<div>
				22222222222
			</div>
			<div>
				3333333333333
			</div>
			<div>
				44444444444444444
			</div>
		</div>
	</div>
 </body>
</html>
上一个：jQuery版可高亮显示的二级CSS菜单
下一个：使用jQuery写了个简易的导航菜单
更多图片编程知识: