萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript制作可折疊的彈出式菜單
JavaScript制作可折疊的彈出式菜單
彈出式菜單想必大家在浏覽網頁時都有見過吧，本文要為大家介紹的是可折疊的彈出式菜單，你若感興趣可以參考下
代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可折疊彈出式菜單</title> </head> <style> body {background-color: #FFF;color: #000;} div {margin-bottom: 10px;} ul.menu {display: none;list-style-type: none;margin-top: 5px;} a.menuLink {font-size: 16px;font-weight: bold;} </style> <script type="text/javascript"> window.onload = initAll; function initAll() { var allLinks = document.getElementsByTagName("a"); for (var i=0; i<allLinks.length; i++) { if (allLinks[i].className.indexOf("menuLink") > -1) { allLinks[i].onclick = toggleMenu; } } } function toggleMenu() { var startMenu = this.href.lastIndexOf("/")+1; var stopMenu = this.href.lastIndexOf("."); var thisMenuName = this.href.substring(startMenu,stopMenu); var thisMenu = document.getElementById(thisMenuName).style; if (thisMenu.display == "block") { thisMenu.display = "none"; } else { thisMenu.display = "block"; } return false; } </script> <body> <h1>Shakespeare's Plays</h1> <div> <a href="menu1.html" class="menuLink">Comdeis</a> <ul class="menu" id="menu1"> <li><a href="pg1.html">All's Well That Ends Well</a></li> <li><a href="pg2.html">As You Like It</a></li> <li><a href="pg3.html">Love's Labour's Lost</a></li> <li><a href="pg4.html">The Comedy of Errors</a></li> </ul> </div> <div> <a href="menu2.html" class="menuLink">Tragedies</a> <ul class="menu" id="menu2"> <li><a href="pg5.html">Anthony & Cleopatra</a></li> <li><a href="pg6.html">Hamlet</a></li> <li><a href="pg7.html">Romeo & Juliet</a></li> </ul> </div> <div> <a href="menu3.html" class="menuLink">Histories</a> <ul class="menu" id="menu3"> <li><a href="pg8.html">Henry IV, Part1</a></li> <li><a href="pg9.html">Henry IV, Part2</a></li> </ul> </div> </body> </html>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved