(原)半显示菜单

    在使用EA时，看到它的菜单栏，如图：

如能用于WEB下面的菜单栏，那么页面版面会更整齐，更美观。
下面简单介绍一下自己是如何实现：
开发环境：Visual Web Developer 2005 Express Edition+JavaScript
思路：主要运用元素的style.display属性。首先要对子菜单进行定位，也就是说寻找当前子菜单中显示的是第几条记录，可先定义一个函数findmin()，找到显示的第一条记录。然后就通过style.display去改变属性。
代码：
1.HTML

 1<table cellpadding =0 cellspacing =0 border =0 width =100%>
 2         <tr>
 3            <td>
 4              <input type =button id=bt name =bt value =show onclick ="btshow()" /><input type =button id=btup name =btup value =up onclick ="upshow()" />
 5              <input type =button id=btdown name =btdown value =down onclick ="downshow()" />
 6            </td>
 7         </tr>
 8       </table>
 9       <div style ="width:100%">
10           <table cellpadding =0 cellspacing =0 border =0 width =100%>
11              <tr><td id=provide_1 style="display :none ">广东省</td></tr>
12               <tr><td id=provide_2 style="display :none ">湖南省</td></tr>
13                <tr><td id=provide_3 style="display :none ">湖北省</td></tr>
14                 <tr><td id=provide_4 style="display :none ">云南省</td></tr>
15                  <tr><td id=provide_5 style="display :none ">广西省</td></tr>
16                   <tr><td id=provide_6 style="display :none ">江西省</td></tr>
17                    <tr><td id=provide_7 style="display :none ">福建省</td></tr>
18                    <tr><td id=provide_8 style ="display:none ">河北省</td></tr>
19                    <tr><td id=provide_9 style ="display:none ">河南省</td></tr>
20                    <tr><td id=provide_10 style ="display:none ">浙江省</td></tr>
21           </table>
22       </div>

2.JavaScript

 1function btshow()
 2       {
 3         for(var i=3;i<7;i++)//初始化
 4         {
 5           if (document.getElementById ("provide_"+i).style .display =="none")
 6           {
 7             document.getElementById ("provide_"+i).style .display="";
 8           }
 9         }
10       }
11       function findmin()//寻找最小显示记录号
12       {
13        for(var i=1;i<10;i++)
14        {
15          if (document.getElementById ("provide_"+i).style .display =="")
16           {
17             return i;
18             break;
19           }
20        } 
21        return 1;
22       }
23       
24       function downshow()
25       {
26          var num=findmin();
27          if(num<=6)//相当于if (eval(num+4)<=10) 其中4为显示的记录数
28          {
29           if (document.getElementById ("provide_"+num).style .display =="")
30           {
31             document.getElementById ("provide_"+num).style .display="none";
32           }
33           if (document.getElementById ("provide_"+eval(num+4)).style .display =="none")
34           {
35             document.getElementById ("provide_"+eval(num+4)).style .display="";
36           }
37          }
38       }
39       
40       function upshow()
41       {
42         var num=findmin();
43          if(num>1)
44          {
45            if (document.getElementById ("provide_"+eval(num-1)).style .display =="none")
46           {
47             document.getElementById ("provide_"+eval(num-1)).style .display="";
48           }
49           if (document.getElementById ("provide_"+eval(num+3)).style .display =="")
50           {
51             document.getElementById ("provide_"+eval(num+3)).style .display="none";
52           }
53          }
54       }
55    </script>

   代码简单一些，且有许多条件没有去考虑，只供大家参考。如有不足之处，望各位多多指教。

相关主题：连接数据库动态生成菜单  http://jerrie.cnblogs.com/articles/355844.html