この記事では、JavaScriptマウスがスワイプしてリファレンス用のセカンダリメニューを表示する効果を共有しています。特定のコンテンツは次のとおりです
1.キーコード：スイッチを使用するか、判断ステートメントを使用して、対応するセカンダリメニューディスプレイモードをブロックまたはなしに変更する
関数SelectTabmenu（i）{switch（i）{case 71：document.getElementById（ "tabmenucon71"）。style.display= "block"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "none";壊す; ...}}2。メインナビゲーションバインディングイベント
<ul>
<li> <a href = "＃" onmouseover = "selecttabmenu（71）"> home </a> </li>
3。セカンダリメニュー
<ul id = "tabmenucon71"> <li> <a href = "＃"> nounnount </a> </li> <li> << a href = "＃">情報</a> </li> </ul>
4.完全なコード
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Horizontal Navigation-Secondレベルメニュー</title> <style type = "text/css"> *{padding：0px;マージン：0px; } .navbar {height：30px;バックグラウンドカラー：＃2b383e;テキストアライグ：センター; } ul {list-style：none; } .nav li {float：left; } .nav li a {display：block;パディング：0 20px;高さ：30px; Line-Height：30px;テキスト装置：なし;色：#fff; } .nav li a：hover {background-color：#ffff;色：＃4db6e7} .tabmenucon {clear：blote;表示：なし; } .tabmenucon li {display：inline-block; } </style> <script type = "text/javascript"> function selecttabmenu（i）{switch（i）{case 71：document.getElementbyId（ "tabmenucon71"）。style.display = "block"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "none";ケース72：document.getElementById（ "tabmenucon71"）。style.display = "none"; document.getElementById（ "tabmenucon72"）。style.display = "block"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "none";壊す;ケース73：document.getElementById（ "tabmenucon71"）。style.display= "none"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "block"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "none";壊す;ケース74：document.getElementById（ "tabmenucon71"）。style.display = "none"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "block"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "none";壊す;ケース75：document.getElementById（ "tabmenucon71"）。style.display= "none"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "block"; document.getElementById（ "tabmenucon76"）。style.display = "none";壊す;ケース76：document.getElementById（ "tabmenucon71"）。style.display = "none"; document.getElementById（ "tabmenucon72"）。style.display = "none"; document.getElementById（ "tabmenucon73"）。style.display = "none"; document.getElementById（ "tabmenucon74"）。style.display = "none"; document.getElementById（ "tabmenucon75"）。style.display = "none"; document.getElementById（ "tabmenucon76"）。style.display = "block";壊す; }} </scrip> </head> <body> <div> <ul> <li> <a href = "＃" onmouseover = "selecttabmenu（71）"> home </a> </li> <li> <a href = "＃" onmouseover = "selecttabmenu（72）" onMouseOver = "SelectTabmenu（73）"> Association News </a> </li> <li> <a href = "＃" onmouseover = "selecttabmenu（74）">協会活動</a> </li> href = "＃" onmouseover = "selecttabmenu（76）">リソーススペース</a> </li> </ul> </div> <div div = "tabmenucon"> <ul id = "tabmenucon71"> <li> <a href = "＃"> </li> <pion <ul id = "tabmenucon72"> <li>はじめに</li> <li>情報</a> </li> </ul> <ul id = "tabmenucon72"> <li> introdution </li> <li>協会記事</li> </ul> <ul id = "tabmenucon73"> id = "tabmenucon73"> <li>情報</li> </ul> <ul id = "tabmenucon73"> <li>情報</li> </ul> <ul id = "tabmenucon74"> <li> monedatoryメンテナンス月</li> <li>グラフィックデザインアクティビティ</li> <li>プログラム設計</li </li> id = "tabmenucon75"> <li>メンバーログイン</li> <li>メンバー登録</li> <li>メンバー料金</li> <li>メンバー情報管理</li> <li>パスワードの変更</li> </ul> <ul id = "tabmenucon76"> <li> ps ps/li> <li> <li> <li> <li> <li> li> flas </div> </body> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。