原生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>