簡單的javascript實現下拉聯動效果

 

View Code

 1 <script type="text/javascript" language="javascript">
 2 
 3     //載入點擊下拉式功能表的聯動效果
 4     function GetQueryString(name) {
 5         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 6         var r = window.location.search.substr(1).match(reg);
 7         if (r != null) return unescape(r[2]); return null;
 8     }
 9     var productServer = GetQueryString("lk");
10     if (productServer == null || productServer == 0)
11         productServer = 1;
12     sethdHelper('productServer', 'PDSL', productServer, 6)
13    
14    //點擊該控制項時展開該控制項下的子功能表，收合其他菜單
15     function sethdHelper(name, linkStr, crow, total) {
16         for (i = 1; i <= total; i++) {
17             //擷取productServer_1
18             var menu = document.getElementById(name + "_" + i);
19             //PDSL_6添加連結樣式
20             var link = document.getElementById(linkStr + "_" + i);
21             link.className = i == crow ? "cur" : "";
22 
23             var list = document.getElementById("lists_" + name + "_" + i);
24             list.style.display = i == crow ? "block" : "none";
25         }
26     }
27 
28 </script>

 

View Code

 1 <div class="cont_left" onload="javascript:sethdHelper('productServer','PDSL',1,6)">
 2     <ul class="menu">
 3         <li class="level1" id="productServer_1"><a id="PDSL_1" href="javascript:sethdHelper('productServer','PDSL',1,6)">
 4             產品說明</a>
 5             <ul class="level2 tab" id="lists_productServer_1" style="display: none;">
 6                 <li><a href="HelpContent.aspx?lk=1&hId=119">產品特色</a></li>
 7                 <li><a href="HelpContent.aspx?lk=1&hId=120">產品構成</a></li>
 8                 <li><a href="HelpContent.aspx?lk=1&hId=121">服務模式</a></li>
 9             </ul>
10         </li>
11         <li class="level1" id="productServer_2"><a id="PDSL_2" href="javascript:sethdHelper('productServer','PDSL',2,6)">
12             產品購買指南</a>
13             <ul class="level2 tab" id="lists_productServer_2" style="display: none;">
14                 <li><a href="HelpContent.aspx?lk=2&hId=122">如何購買</a></li>
15                 <li><a href="Pro_Order.aspx?id=115&lk=2">線上訂購</a></li>
16                 <li><a href="Pro_Pay.aspx?id=115&lk=2">付款條件</a></li>
17                 <li><a href="HelpContent.aspx?lk=2&hId=123">產品列表</a></li>
18                 <li><a href="HelpContent.aspx?lk=2&hId=124">專業軟體定製</a></li>
19             </ul>
20         </li>
21         <li class="level1" id="productServer_3"><a id="PDSL_3" href="javascript:sethdHelper('productServer','PDSL',3,6)">
22             我要試用</a>
23             <ul class="level2 tab" id="lists_productServer_3" style="display: none;">
24                 <li class="level1"><a href="Pro_Try.aspx?lk=3">我要試用</a> </li>
25             </ul>
26         </li>
27         <li class="level1" id="productServer_4"><a id="PDSL_4" href="javascript:sethdHelper('productServer','PDSL',4,6)">
28             代理專區</a>
29             <ul class="level2 tab" id="lists_productServer_4" style="display: none;">
30                 <li><a href="HelpContent.aspx?lk=4&hId=125">代理流程</a></li>
31             </ul>
32         </li>
33         <li class="level1" id="productServer_5"><a id="PDSL_5" href="javascript:sethdHelper('productServer','PDSL',5,6)">
34             客服中心</a>
35             <ul class="level2 tab" id="lists_productServer_5" style="display: none;">
36                 <li><a href="HelpContent.aspx?lk=5&hId=126">常見問題集</a></li>
37             </ul>
38         </li>
39         <li class="level1" id="productServer_6"><a id="PDSL_6" href="javascript:sethdHelper('productServer','PDSL',6,6)">
40             聯絡我們</a>
41             <ul class="level2 tab" id="lists_productServer_6" style="display: none;">
42                 <li><a href="HelpContent.aspx?lk=6&hId=127">聯絡我們</a></li>
43             </ul>
44         </li>
45     </ul>
46 </div>