                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

本練習(xí)題的同學(xué)代碼第一位，看不太懂，有大佬寫寫注釋嗎。。

<script?type="text/javascript">

????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????window.onload?=?function?()?{
????????var?nav?=?document.getElementById("nav");
????????var?nav1?=?nav.getElementsByTagName("li");
????????var?oDiv?=?document.getElementById("content");
????????var?xDiv?=?oDiv.getElementsByTagName("div");
????????for?(var?i?=?0;?i?<?nav1.length;i++){
????????????nav1[i].index?=?i;
????????????nav1[i].onmouseover?=?function?()?{
????????????????for?(var?i=0;i<nav1.length;i++){
????????????????????nav1[i].className?=?"";

????????????????}
????????????????this.className?=?"active";
????????????????for?(var?j=0;j<xDiv.length;j++){
????????????????????xDiv[j].className?=?"hide";
????????????????}
????????????????xDiv[this.index].className?=?"show";
????????????}
????????}
????}

</script>

慕慕0116261

2019-07-30

源自：JavaScript進(jìn)階篇 10-1

關(guān)注問(wèn)題我要回答

866

操作

收起

2 回答

慕函數(shù)2570892 回答被采納 +2 積分
2019-08-13

<script?type="text/javascript">

????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
????window.onload?=?function?()?{
????????var?nav?=?document.getElementById("nav");?????????//獲取id為nav的節(jié)點(diǎn)，即選項(xiàng)卡的第一行）
????????var?nav1?=?nav.getElementsByTagName("li");????????//獲取三個(gè)選項(xiàng)（房產(chǎn)、家居、二手房）。以數(shù)組的形式返回給nav1
????????var?oDiv?=?document.getElementById("content");????????????//獲取id為content的節(jié)點(diǎn)，該節(jié)點(diǎn)包含三頁(yè)不同的內(nèi)容。
????????var?xDiv?=?oDiv.getElementsByTagName("div");????????????//進(jìn)而獲得三頁(yè)的界面，返回形式為數(shù)組，用于操作
????????for?(var?i?=?0;?i?<?nav1.length;i++){????????????//該循環(huán)將三個(gè)選項(xiàng)的屬性全部置為
????????????nav1[i].index?=?i;
????????????nav1[i].onmouseover?=?function?()?{
????????????????for?(var?i=0;i<nav1.length;i++){??????//將三個(gè)選項(xiàng)的屬性class全部置為空，即顯示為未被選中效果
????????????????????nav1[i].className?=?"";

????????????????}
????????????????this.className?=?"active";???????//鼠標(biāo)懸停選項(xiàng)的class屬性重新被置為active，該選項(xiàng)被顯示為選中效果
????????????????for?(var?j=0;j<xDiv.length;j++){????//將三個(gè)頁(yè)面的class屬性置為hide，即全部隱藏
????????????????????xDiv[j].className?=?"hide";
????????????????}
????????????????xDiv[this.index].className?=?"show";????????//鼠標(biāo)懸停選項(xiàng)對(duì)應(yīng)的頁(yè)面的class屬性重新被置為show，該界面被顯示出來(lái)
????????????}
????????}
????}

</script>

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕慕0116261 提問(wèn)者
2019-08-14

感謝大佬答復(fù)，不過(guò)這句

nav1[i].index?=?i;

是什么意思，其他大致都懂的了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕斯卡4119624

這里nav1[i]是對(duì)象。nav1[i].index=i是給這個(gè)對(duì)象添加一個(gè)自定義屬性index并且屬性值為i，index就是索引的意思。當(dāng)然這個(gè)屬性名你可以自取。這里給它自定義這個(gè)屬性是希望在后面通過(guò)這個(gè)屬性找到并利用這個(gè)對(duì)象。

2019-09-06 回復(fù) 有任何疑惑可以回復(fù)我~