<SCRIPT
language=javascript1.2>
function
showsubmenu(sid){
whichEl
=
eval('submenu'
+
sid)
if
(whichEl.style.display
==
'none'){
eval("submenu"
+
sid
+
".style.display=''")
}
else{
eval("submenu"
+
sid
+
".style.display='none'")
}
}
</SCRIPT>
display方法的值为none时,为不显示表格内容
showsubmenu(sid)中的sid为HTML代码中表格中td的id属性值
=====================代码实现过程================
<HTML><HEAD><TITLE>管理导航菜单</TITLE>
<SCRIPT
language=javascript1.2>
function
showsubmenu(sid){
whichEl
=
eval('submenu'
+
sid)
if
(whichEl.style.display
==
'none'){
eval("submenu"
+
sid
+
".style.display=''")
}
else{
eval("submenu"
+
sid
+
".style.display='none'")
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE
width=158
align=center>
<TBODY>
<TR>
<TD
id=menuTitle1
style="CURSOR:
hand"
onclick=showsubmenu(1)
height=25
><span
class="glow">导航一</span></TD>
</TR>
<TR>
<TD
height="100%"
id=submenu1
style="DISPLAY:
none">
<DIV
style="WIDTH:
158px">
<TABLE
cellSpacing=0
cellPadding=0
width=132
align=center>
<TBODY>
<TR>
<TD
height=20>1</TD>
</TR>
<TR>
<TD
height=20>2</TD>
</TR>
</TBODY></TABLE>
</DIV>
<DIV
style="WIDTH:
158px">
<TABLE
cellSpacing=0
cellPadding=0
width=130
align=center>
<TBODY>
<TR>
<TD
height=20></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<TABLE
width=158
align=center>
<TBODY>
<TR>
<TD
id=menuTitle3
style="CURSOR:
hand"
onclick=showsubmenu(3)
height=25
>
<SPAN
class=glow>导航二</SPAN></TD>
</TR>
<TR>
<TD
id=submenu3
style="DISPLAY:
none">
<DIV
style="WIDTH:
158px">
<TABLE
cellSpacing=0
cellPadding=0
width=132
align=center>
<TBODY>
<TR>
<TD
height=20>3</TD>
</TR>
<TR>
<TD
height=20>4</TD>
</TR>
</TBODY></TABLE>
</DIV>
<DIV
style="WIDTH:
158px">
<TABLE
cellSpacing=0
cellPadding=0
width=130
align=center>
<TBODY>
<TR>
<TD
height=20></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
</BODY></HTML>
1、打开HBuilder编辑工具，新建静态页面inputShowHide.html，引入jquery核心js文件。
2、在<body></body>元素内插入一个表格，表格中第一行插入七个输入框；第一个输入框设置为显示，其他六个输入框设置为隐藏，分别设置对应的值。
3、在jquery初始化函数内编写js代码，获取input输入框对象，声明变量selectInput并赋值为3；遍历input对象，当循环时变量selectInput等于i，让其对应的input输入框显示，其他的隐藏。
4、保存代码并预览该静态页面，发现第三个输入框显示出来，其他的都隐藏了。
5、如果不想使用for循环，可以直接利用jquery选择器功能，控制输入框显示和隐藏。
6、再次预览页面，发现出现了报错，查看代码发现是选择器符号写错了；jquery筛选选择器以什么开头，需要使用的是"^="，而不是“=^”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）