选项卡（Tab）切换事件

选项卡切换事件

<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 href="#"  class="on">充话费</a>
			<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="images/1.png" />
			</div>
			<div class="content">
				<img src="images/2.png" />
			</div>
			<div class="content">
				<img src="images/3.png" />
			</div>

			<div class="content">
				<img src="images/4.png" />
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	 // 找到所有的导航
	 var container = document.getElementById("container");
	 var as = container.getElementsByTagName("a");
	 // 找到所有内容
	 var oDivs = document.getElementsByClassName("content");
	 for(var i=0;i<as.length;i++){
		 给as设置index属性
		as[i].setAttribute("index",i);
		 给as添加点击事件
		as[i].onclick=function(){
		 先排除所有的
		  for(var j=0;j<as.length;j++){
			  as[j].className="";
			  oDivs[j].style.display="none";
		  }
		  再给自己加上
		  this.className="on";
		  var index=this.getAttribute("index");
		  oDivs[index].style.display="block";
		}
	 }
</script>
选项卡（Tab）切换事件

选项卡切换事件

猜你喜欢
