為什么要用兩個for循環呀,選項卡切換
<script type="text/javascript">
? ? ? ? ?
? ? // JS實現選項卡切換
? ? ? ? ?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實現選項卡切換
? ? ? ? ?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對應房產,家具,二手房;方便之后的this.index調用之前oLi添加索引號。這是第一個for循環的作用
? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {
? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){//點擊時先初始化樣式
? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";//3個li都沒有on樣式
? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";//3個div影藏
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?this.className = "on";//點擊的li添加on樣式
? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";//this.index調用之前oLi添加索引號
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
? ? ? ? ?}
? ? ??
? ? ??
? ??
? ? </script>
純手寫,望采納
2017-02-07
第一個for循環,拿到點擊的那一項,并添加點擊事件;
第二個for循環,對所有的項置默認空,然后才對所點擊的該項賦對應的點擊css樣式值。