原生javascript选项卡

js选项卡是一个常用的实现。这里我们将用原生js来将其给予实现。

首先html代码：

<div id="container">
　　<input type="button" id="btn1" value="黄色" class="active">
　　<input type="button" id="btn2" value="红色">
　　<input type="button" id="btn3" value="绿色">
　　<input type="button" id="btn4" value="褐色">
　　<div id="cont">　　　

　　　　<div style="display: block;">111</div>
　　　　<div>222</div>
　　　　<div>333</div>
　　　　<div>444</div>

　　</div>

</div>

简单的css代码：

* { margin: 0; padding: 0; }
#container { width: 204px; margin: 0 auto; }
#container .active { background-color: yellow }
#cont { width: 200px; height: 200px; border: 1px solid #333; background-color: #999 }
#cont div { display: none; }

 

重点的js代码：

window.onload = function(){
　　var oContainer = document.getElementById("container");
　　var aIput = oContainer.getElementsByTagName("input");
　　var oCont = document.getElementById("cont");
　　var aDiv = oCont.getElementsByTagName("div");

　　for( var i = 0; i < aIput.length; i ++ ){
　　　　aIput[i].index = i;
　　　　aIput[i].onclick = function(){
　　　　　　for( var i = 0; i < aIput.length; i ++ ){
　　　　　　　　aIput[i].className = "";
　　　　　　　　aDiv[i].style.display = "none"
　　　　　　}
　　　　　　this.className = "active";
　　　　　　aDiv[this.index].style.display = "block"
　　　　}
　　}
}

 

说明：1、首先是获取元素，一般原生js获取元素都是document.get..这个格式，其实还可以先将被获取元素的父级先获取到，然后通过他再获取目标元素。

　　　2、显示隐藏的div索引值问题，有一种方案是在各个div里面添加index索引值，如：但是这样会有兼容性，在标准浏览器下面

　　　　 会出现错误，而且当div数量不确定的时候弄起来不方便；所以我们通过js来设置索引值；aIput[i].index = i; 这样就能使得div能够很好地显示和隐藏。