為什么要用兩個for循環(huán)呀,選項卡切換
<script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? ? ? ?window.onload = function(){
? ? ? ? ? ? ?var oTab = document.getElementById("tabs");
? ? ? ? ? ? ?var oUl = oTab.getElementsByTagName("ul")[0];
? ? ? ? ? ? ?var oLis = oUl.getElementsByTagName("li");
? ? ? ? ? ? ?var oDivs= oTab.getElementsByTagName("div");
? ? ? ? ? ? ?for(var i= 0,len = oLis.length;i<len;i++){
? ? ? ? ? ? ? ? ?oLis[i].index = i;
? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {
? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){
? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";
? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?this.className = "on";
? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
? ? ? ? ?}
? ? ??
? ? ??
? ??
? ? </script>
2017-02-06
<script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? ? ? ?window.onload = function(){
? ? ? ? ? ? ?var oTab = document.getElementById("tabs");
? ? ? ? ? ? ?var oUl = oTab.getElementsByTagName("ul")[0];
? ? ? ? ? ? ?var oLis = oUl.getElementsByTagName("li");
? ? ? ? ? ? ?var oDivs= oTab.getElementsByTagName("div");
? ? ? ? ? ? ?for(var i= 0,len = oLis.length;i<len;i++){
? ? ? ? ? ? ? ? ?oLis[i].index = i;//給oLi添加索引號0,1,2對應(yīng)房產(chǎn),家具,二手房;方便之后的this.index調(diào)用之前oLi添加索引號。這是第一個for循環(huán)的作用
? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {
? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){//點(diǎn)擊時先初始化樣式
? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";//3個li都沒有on樣式
? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";//3個div影藏
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?this.className = "on";//點(diǎn)擊的li添加on樣式
? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";//this.index調(diào)用之前oLi添加索引號
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
? ? ? ? ?}
? ? ??
? ? ??
? ??
? ? </script>
純手寫,望采納
2017-02-07
第一個for循環(huán),拿到點(diǎn)擊的那一項,并添加點(diǎn)擊事件;
第二個for循環(huán),對所有的項置默認(rèn)空,然后才對所點(diǎn)擊的該項賦對應(yīng)的點(diǎn)擊css樣式值。