怎么實現(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 = "";
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
? ? ? ? ?}
for循環(huán)這段不懂，到底是怎么實現(xiàn)選項卡切換的，怎么找到與之對應(yīng)的選項卡并顯現(xiàn)出來
2016-04-28
為什么里面還有一個for循環(huán)
2016-04-21
這里有3個<li>標簽和<div>標簽，當點擊第一個<li>時，同時第一個<div>得到響應(yīng)，就需要通過index來完成。
它幫助獲取檢索<li>的序號位置，獲得的結(jié)果再在div中應(yīng)用，以此產(chǎn)生了關(guān)聯(lián)效應(yīng)。
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++){????? //第二個for循環(huán)將多余情形進行了屏蔽
? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";
? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?this.className = "on";????????????????????//這里再將要顯示的內(nèi)容，情形設(shè)置提取出來
? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";????
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
2016-04-20
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;//這里的index 是oLis[i]的自定義屬性，用來保存該元素在原數(shù)組中的下標.
? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {//注冊一個點擊事件，當點擊的時候所有標簽都恢復(fù)最初狀態(tài)
? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){//這步是相對于未被點擊部分的樣式
? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";//將所有的li的className設(shè)置為空
? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";//將所有的div的className設(shè)置為隱藏.
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?this.className = "on";//將當前點擊的li的className設(shè)置為on
? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";//前邊保存了index的值,這里直接用this.index來表示當前是第幾個div,并將其className設(shè)置為空.
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?};
? ? ? ? ?}
這樣再加上css中的控制 就實現(xiàn)了選顯卡切換.