Fixed div nesting issues when change menu

The old method uses js to foreach all the div contents and change each page by changing them. This would cause order problem when there is div nested in another. New method takes only the closest child of div by JQuery children() method and store into the myTab variable. This solves this issue and makes the code much tidier.
mihane-ichinose · Aug 6, 2019 · f7b3299 · f7b3299
1 parent 091d68b
commit f7b3299
Showing 1 changed file with 3 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -179,7 +179,7 @@ <h3>当前时间：
         var myTab = document.getElementById("tab");    //整个div
         var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
         var myLi = myUl.getElementsByTagName("li");    //数组
-        var myDiv = myTab.getElementsByTagName("div"); //数组
+        var myDiv = $(myTab).children('div').get(); //数组
 
         for (var i = 0; i < myLi.length; i++) {
             myLi[i].index = i;
@@ -193,17 +193,10 @@ <h3>当前时间：
                 document.getElementById("searchID").value = "";
                 document.getElementById("searchName").value = "";
                 for (var j = 0; j < myLi.length; j++) {
-                    myLi[j].className = "menu off";
-                    //特殊情况：搜索中带有嵌套的div。
-                    if (j === 2) {
-                        j += 1;
-                    }
+                    myLi[j].className = "menu off";   
                     myDiv[j].className = "hide";
                 }
                 this.className = "menu on";
-                if (this.index === 2) {
-                    this.index += 1;
-                }
                 myDiv[this.index].className = "show";
             }
         }
@@ -358,4 +351,4 @@ <h3>当前时间：
     }
 </script>
 </body>
-</html>
+</html>