                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

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

<script?type="text/javascript">

????//?JS實現選項卡切換
????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進階篇 10-1

關注問題我要回答

893

操作

收起

2 回答

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

<script?type="text/javascript">

????//?JS實現選項卡切換
????window.onload?=?function?()?{
????????var?nav?=?document.getElementById("nav");?????????//獲取id為nav的節點，即選項卡的第一行）
????????var?nav1?=?nav.getElementsByTagName("li");????????//獲取三個選項（房產、家居、二手房）。以數組的形式返回給nav1
????????var?oDiv?=?document.getElementById("content");????????????//獲取id為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++){??????//將三個選項的屬性class全部置為空，即顯示為未被選中效果
????????????????????nav1[i].className?=?"";

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

</script>