< p >HTML二級欄目JS代碼

< pre >在 HTML 網(wǎng)頁制作時，經(jīng)常會遇到二級欄目的設(shè)計需求，例如在導(dǎo)航條中，鼠標(biāo)懸停在一級欄目上時，會彈出下拉菜單，展示二級欄目。這時，我們就需要用到 JavaScript 來實現(xiàn)二級欄目的效果。 下面是一個基本的二級欄目 JS 代碼： <script> var navList = document.getElementsByClassName('nav-list')[0]; var navItems = navList.getElementsByTagName('li'); var subMenus = navList.getElementsByClassName('sub-menu'); for (var i = 0; i < navItems.length; i++) { navItems[i].onmouseover = function () { for (var j = 0; j < subMenus.length; j++) { subMenus[j].style.display = 'none'; } this.getElementsByClassName('sub-menu')[0].style.display = 'block'; }; } navList.onmouseout = function () { for (var i = 0; i < subMenus.length; i++) { subMenus[i].style.display = 'none'; } }; </script> 這個代碼主要實現(xiàn)的是：當(dāng)鼠標(biāo)懸停在一級欄目上時，顯示對應(yīng)的二級欄目；鼠標(biāo)移出一級欄目或者二級欄目時，二級欄目隱藏。 我們可以將代碼保存在一個 .js 文件中，然后在 HTML 中通過 <script> 標(biāo)簽來加載 JS 文件。例如： <script src="js/nav.js"></script>