原生js实现选项卡切换

  原生js实现选项卡切换

<body>
		<div id="container">
			<!--a.className = ""-->
			<a href="#" class="on" index="0">充话费</a>
			<!--a.className = "on"-->
			<a href="#"  index="1">充流量</a>
			<a href="#" index="2">充固话</a>
			<a href="#" index="3" 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>
		<p></p>
	</body>
</html>
<script src="../../../public.js"></script>
<script type="text/javascript">
	var container = document.getElementById("container");
	var content = document.querySelectorAll(".content");
	var a = document.querySelectorAll("a");
	container.onclick = function(eve){
		var  e = eve || event;
		var target = e.target || e.srcElement;
		if(target.nodeName.toLowerCase() == "a"){
			//alert(target.innerHTML);
			for (var i = 0; i < a.length; i++) {
				a[i].className = "";
				//a[i].index = i; 
				//a[i].setAttribute("index",i);
				content[i].style.display = "none";
			}
			target.className = "on";
			content[target.getAttribute("index")].style.display = "block";
		}
	}
	
	
</script>

　　

posted @ 2020-10-21 17:05  胡炖鱼  阅读(324)  评论(0)  编辑  收藏  举报