Simple javascript pull-down Interaction

 

View Code

1 <script type = "text/javascript" language = "javascript">
2
3 // load the linkage effect from the drop-down menu
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 // when you click the control, the sub-menu under the control is displayed and other menus are hidden.
15 function sethdHelper (name, linkStr, crow, total ){
16 for (I = 1; I <= total; I ++ ){
17 // obtain productServer_1
18 var menu = document. getElementById (name + "_" + I );
19 // PDSL_6 add link Style
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. Product Description </a>
5 <ul class = "level2 tab" id = "lists_productServer_1" style = "display: none;">
6 <li> <a href = "HelpContent. aspx? Lk = 1 & hId = 119 "> product features </a> </li>
7 <li> <a href = "HelpContent. aspx? Lk = 1 & hId = 120 "> product composition </a> </li>
8 <li> <a href = "HelpContent. aspx? Lk = 1 & hId = 121 "> service mode </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 product purchase guide </a>
13 <ul class = "level2 tab" id = "lists_productServer_2" style = "display: none;">
14 <li> <a href = "HelpContent. aspx? Lk = 2 & hId = 122 "> How to purchase </a> </li>
15 <li> <a href = "Pro_Order.aspx? Id = 115 & lk = 2 "> online order </a> </li>
16 <li> <a href = "Pro_Pay.aspx? Id = 115 & lk = 2 "> payment method </a> </li>
17 <li> <a href = "HelpContent. aspx? Lk = 2 & hId = 123 "> product list </a> </li>
18 <li> <a href = "HelpContent. aspx? Lk = 2 & hId = 124 "> professional software customization </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. I want to try it out. </a>
23 <ul class = "level2 tab" id = "lists_productServer_3" style = "display: none;">
24 <li class = "level1"> <a href = "Pro_Try.aspx? Lk = 3 "> I want to try it out </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 proxy area </a>
29 <ul class = "level2 tab" id = "lists_productServer_4" style = "display: none;">
30 <li> <a href = "HelpContent. aspx? Lk = 4 & hId = 125 "> proxy process </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 Customer Service Center </a>
35 <ul class = "level2 tab" id = "lists_productServer_5" style = "display: none;">
36 <li> <a href = "HelpContent. aspx? Lk = 5 & hId = 126 "> FAQs </a> </li>
37 </ul>
38 </li>
39 <li class = "level1" id = "productServer_6"> <a id = "PDSL_6" href = "javascript: sethdHelper ('productserver', 'pdsl ', 6)">
40 Contact Us </a>
41 <ul class = "level2 tab" id = "lists_productServer_6" style = "display: none;">
42 <li> <a href = "HelpContent. aspx? Lk = 6 & hId = 127 "> Contact Us </a> </li>
43 </ul>
44 </li>
45 </ul>
46 </div>