一段比较实用的JS导航条显隐例子

iteye_12332

于 2008-05-16 13:43:00 发布

阅读量119

点赞数

文章标签： xhtml javascript ViewUI

本文介绍了一个简单的JavaScript函数fn，该函数可以根据传入的参数num来动态显示或隐藏页面上的五个不同的DIV元素。当按钮被点击时，对应的DIV将被显示出来，而其他的DIV则会被隐藏。这种效果常用于网页导航或内容切换等交互设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<scriptlanguage="javascript">...

functionfn(num)...{

vari;

for(i=1;i<=5;i++)...{

vardivtar=document.getElementById("div"+i);

varbuttontar=document.getElementById("button"+i);

if(num==i)...{

divtar.style.display="";

}else...{

divtar.style.display="none";

}

}

}

</script>

<title>无标题文档</title>

</head>

<body>

<p> </p>

<p> </p>

<divid="div1">div1</div>

<divid="div2"style="display:none">div2</div>

<divid="div3"style="display:none">div3</div>

<divid="div4"style="display:none">div4</div>

<divid="div5"style="display:none">div5</div>

<p>

<inputtype="submit"name="button"id="button1"value="button1"onclick="fn(1)"/>

</p>

<p>

<inputtype="submit"name="button2"id="button2"value="button2"onclick="fn(2)"/>

</p>

<p>

<inputtype="submit"name="button3"id="button3"value="button3"onclick="fn(3)"/>

</p>

<p>

<inputtype="submit"name="button4"id="button4"value="button4"onclick="fn(4)"/>

</p>

<p>

<inputtype="submit"name="button5"id="button5"value="button5"onclick="fn(5)"/>

</p>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。