JQuery實現選單切換--以百度地圖的InfoWindow為例
阿新 • • 發佈：2019-02-20
在網頁設計中，很多元素的外觀顯示與其真正的內部實現其實並不完全一致，正如前邊qq的顯示面板示例一樣，給人的直觀感覺有點小複雜，但其實質就是個ul。本文所示例的切換選單也一樣，外觀看起來也有點複雜，但其實質很簡單，同樣可以通過ul實現。
本文使用JQuery來實現，相對於JavaScript來說，簡化了DOM的很多操作，特別是選擇器的使用，省去了迴圈選擇元素。當然，首先你得引入JQuery，頁面程式碼如下：
頁面對應的顯示樣式檔案為myInfoWindow.css，程式碼如下：<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>選單切換</title> <meta name="description" content="" /> <link href="Styles/myInfoWindow.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#nav li").click(function () { $(this).attr("class", "current"); //設定當前點選選單的樣式 $(this).siblings().attr("class", ""); //設定當前點選選單外的選單樣式 $("#con_" + this.id).show(); $("#con_" + this.id).siblings().hide(); }); $("#menu_con div:first").show(); $("#menu_con div:first").siblings().hide(); }); </script> </head> <body> <div id="menu_out"> <div id="menu_in"> <div id="menu"> <ul id="nav"> <li id="one1" class="current"><span>從這裡出發</span></li> <li id="one2"><span>到這裡去</span></li> <li id="one3"><span>經過這裡</span></li> <li id="one4"><span>在附近找</span></li> </ul><!--nav end--> <div id="menu_con"> <div id="con_one1"> <br /> <span>終點:</span><input type="text" class="queryCon" /> <input id="byBusTo" class="btn" type="button" value="公交"/> <input id="byCarTo" class="btn" type="button" value="駕車"/> </div> <div id="con_one2"> <br /> <span>起點:</span><input type="text" class="queryCon" /> <input id="byBusFrom" class="btn" type="button" value="公交"/> <input id="byCarFrom" class="btn" type="button" value="駕車"/> </div> <div id="con_one3"> <br /> <span>經過這裡....</span> </div> <div id="con_one4"> <br /> <a href="">酒店</a><a href="">餐館</a><a href="">銀行</a><a href="">醫院</a> <input type="text" class="query" /> <input id="search" class="btn" type="button" value="搜尋"/> </div> </div><!--menu_con end--> </div><!--menu end--> </div> </div> </body> </html>
頁面效果如下：.queryCon{ color:#d3d3d3; font-family: Arial; font-size:16px; border:solid 1px gray; width: 160px; height:16px; } .query{ color:#d3d3d3; font-family: Arial; font-size:16px; border:solid 1px gray; width: 100px; height:16px; } .btn { border: 0 none; background-color:#4169e1; padding:3px 3px 3px 3px; color:white; cursor: pointer; font-size: 12px; height: 22px; width: 51px; } /*全域性樣式*/ *{font-size:12px;} body { margin:0; padding:0; background-color:#FFFFFF; font-size:10px; color:#666666; font-family:"宋體",Arial, Helvetica, sans-serif; } /*主導航選單*/ #menu ul { padding:0; border:0; list-style:none; margin-top:0; margin-right:0; margin-bottom:0; margin-left:10px; } /* margin 外邊距設定 */ #menu_out { padding-left:1px; margin:10px auto; } #nav li { float:left; display:block; padding-left:6px; height:25px; background-color:lightblue; cursor:pointer; text-decoration:none; } #nav li span { float:left; padding:5px 10px 5px 10px; line-height:13px; font-size:12px; font-weight:bold; color:blue; } #nav .current { background-position:left 30%; background-color:#4169e1; } #nav .current span { float:left; padding:5px 10px 5px 10px; line-height:13px; font-size:12px; font-weight:bold; color:white; } /*子欄目*/ #menu_con { text-align:left; padding-left:20px; clear:both; } #menu_con li { float:left; height:22px; margin-top:8px; } #menu_con div span { float:left; font-size:12px; font-weight:bold; padding:3px 3px 1px 3px; line-height:14px; } #menu_con div a { padding:5px 2px 5px 2px; font-size:10px; text-decoration:none; color:#4169e1; } #menu_con div a:hover { padding:5px 2px 5px 2px; font-size:10px; text-decoration:underline; color:#4169e1; }
本文的示例，是在單擊一級選單時顯示其所對應的內容，同樣也可以使用onmouseover等事件，一級選單對應的內容也可以使用ul構建一個二級選單。當然，這只是一個很簡單的示例，大家可以根據自己的需求進一步進行擴充套件。