案例选项卡

<!DOCTYPE html>
<document>
	<html>

	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
				font-size: 14px;
			}
			
			#container {
				width: 398px;
				margin: 100px auto;
			}
			
			#container a {
				display: block;
				width: 98px;
				height: 42px;
				line-height: 42px;
				text-align: center;
				float: left;
				border-top: solid 1px #FF4400;
				border-bottom: solid 1px #FF4400;
				border-left: solid 1px #FF4400;
				color: #333333;
				text-decoration: none;
			}
			
			#container a:hover {
				color: #FF4400;
			}
			
			.content {
				width: 355px;
				height: 140px;
				text-align: center;
				border-right: solid 1px #FF4400;
				border-bottom: solid 1px #FF4400;
				border-left: solid 1px #FF4400;
				padding: 30px 0 0 40px;
				display: none;
			}
			
			.clear {
				clear: left;
			}
			
			#container a.on {
				background: #FF4400;
				color: #fff;
			}
		</style>

	</head>

	<body>
		<div id="container">
			<!--a.className = ""-->
			<a href="#" class="on">充话费</a>
			<!--a.className = "on"-->
			<a href="#">充流量</a>
			<a href="#">充固话</a>
			<a href="#" style="border-right: solid 1px #FF4400;">充宽带</a>

			<div class="clear"></div>

			<div class="content" style="display:block;">
				<img src="../img2/1.png" />
			</div>
			<div class="content">
				<img src="../img2/2.png" />
			</div>
			<div class="content">
				<img src="../img2/3.png" />
			</div>
			<div class="content">
				<img src="../img2/4.png" />
			</div>
		</div>
		<p></p>
	</body>

	</html>
</document>
<script type="text/javascript">
	var aArr = document.getElementsByTagName("a");
	var contArr = document.getElementsByClassName("content");
	for (var i = 0; i < aArr.length; i++) {
		  aArr[i].index = i;
		aArr[i].onclick = function() {
			for (var j = 0; j < aArr.length; j++) {
				aArr[j].className = "";
				contArr[j].style.display = "none";
			}
			this.className = "on";
			contArr[this.index].style.display = "block";
		}
	}
</script>
猜你喜欢
