原生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能够很好地显示和隐藏。