简单的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>






 




 






		

		
posted @ 
2011-09-29 14:03 
石 磊 
阅读(641) 
评论(0) 
编辑 
收藏 
举报