Maison > Article > interface Web > Méthode JavaScript pour implémenter un menu contextuel caché en cliquant avec le bouton gauche n'importe où sur une page Web_javascript skills
Cliquez avec le bouton gauche n'importe où sur la page Web et une fenêtre contextuelle apparaîtra. En fait, JS est utilisé pour contrôler l'affichage de la couche DIV. Il y a un tableau imbriqué dans la couche DIV et un menu est placé. dans le tableau. De cette façon, il est facile à modifier et ne nécessite pas de CSS. Ce n'est pas grave, vous pouvez le copier, l'ouvrir avec DW et re-modifier le style du menu selon votre couleur préférée
.<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>隐藏菜单</title> <style type="text/css"> body { font: 9pt; } .box { font: 9pt "宋体"; position: absolute; background: skyblue; } </style> </head> <body> <table cellpadding="5" id="itemopen" class="box" style="display:none"> <tr> <td bgcolor="#0066cc">网站导航:</td> </tr> <tr> <td><a href="/">AJAX实例</a></td> </tr> <tr> <td><a href="/jscss/">jQuery相关</a></td> </tr> <tr> <td><a href="/jscss/">ExtJS演示</a></td> </tr> </table> </center> </div> <script language="JavaScript"> document.onclick = popUp function popUp() { newX = window.event.x + document.body.scrollLeft newY = window.event.y + document.body.scrollTop menu = document.all.itemopen if ( menu.style.display == ""){ menu.style.display = "none" } else { menu.style.display = ""} menu.style.pixelLeft = newX - 50 menu.style.pixelTop = newY - 50 } </script> <body> <p align="center"><font size="3">点击左键看看?</p> </body> </html>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.