本文摘自PHP中文网,作者coldplay.xixi,侵删。
javascript菜单的实现方法:首先将菜单用一个表格行来表示;然后将此菜单下的所有菜单项紧跟在菜单后放在一个表格行中的仅有的一个单元格中;最后用js代码来处理菜单的点击事件。
本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。
javascript菜单的实现方法:
1、将菜单(Menu)用一个表格行来表示,其中只有一个单元格,内容是菜单的名称 ,如:
Html代码
1 2 3 4 5 6 7 8 9 10 | <TR>
<TD id= "td_0" align= "middle" width= "89%" bgColor=#1f65c2>
<A href= "javascript:Show(0)" >基础数据管理</A>
</TD>
</TR>
<TR>
<TD id= "td_0" align= "middle" width= "89%" bgColor=#1f65c2>
<A href= "javascript:Show(0)" >基础数据管理</A>
</TD>
</TR>
|
这个地方给表示菜单的单元格也定义了一个ID,这个ID的定义是非常重要的,在整个页面中都是可见的,这样就可以通过ID来
指定其所代表元素的属性。单元格的内容是一个超连接,他指定一个javascript方法,响应点击此菜单后的事件 .
2、将此菜单下的所有菜单项紧跟在菜单后放在一个表格行中的仅有的一个单元格中,使用换行来将他们竖起排列
Html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <TR id=tr_0 style= "DISPLAY: none;cursor:hand" >
<TD align= "middle" bgColor= "#4c84ce" height= "50" >
<DIV align= "center" >
<A href= "" >图书分类信息</A> <BR>
<A href= "" >藏馆信息</A> <BR>
</DIV>
</TD>
</TR>
<TR id=tr_0 style= "DISPLAY: none;cursor:hand" >
<TD align= "middle" bgColor= "#4c84ce" height= "50" >
<DIV align= "center" >
<A href= "" >图书分类信息</A> <BR>
<A href= "" >藏馆信息</A> <BR>
</DIV>
</TD>
</TR>
|
这个地方注意,为放置菜单项的这个表格行定义了一个ID,对菜单的展开与折叠将通过这个ID来控制,另外,菜单的初始状态是折叠的,即这一行不可见,所以使用了CSS代码 style="display:none"
3、第三步就是整个过程中的重点了,需要写一段js代码来处理菜单的点击事件
Js代码 复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <script>
var classCount = 4;
function Show(theId) {
theTr = eval ( "tr_" + theId);
if (theTr.style.display == "none" ) {
theTr.style.display = "block" ;
}
else {
theTr.style.display = "none" ;
}
for (i = 0; i < classCount; i++) {
if (i == theId)
continue ;
theTr = eval ( "tr_" + i);
theTr.style.display = "none" ;
}
}
</script>
<script>
var classCount = 4;
function Show(theId) {
theTr = eval ( "tr_" + theId);
if (theTr.style.display == "none" ) {
theTr.style.display = "block" ;
}
else {
theTr.style.display = "none" ;
}
for (i = 0; i < classCount; i++) {
if (i == theId)
continue ;
theTr = eval ( "tr_" + i);
theTr.style.display = "none" ;
}
}
</script>
|
相关免费学习推荐:javascript学习教程
以上就是javascript菜单如何实现的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript异步编程方法有哪些
js要怎么学
javascript怎么设置表单只读
前端笔试中的坑位-js隐式转换问题
javascript怎么清除缓存
javascript的内部方法有什么
js数组怎么转为字符串
javascript怎么去掉回车
javascript中怎么将值转为字符串类型
javascript是动态的吗
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript菜单如何实现