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

最新推荐文章于 2025-10-15 21:09:29 发布

最新推荐文章于 2025-10-15 21:09:29 发布 · 129 阅读

文章标签：

#xhtml #javascript #ViewUI

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

<!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>

<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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_12332

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

2024年Unity 面试题 |五萬字二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】

努力前行，总会成为自己心中的那道光

02-23

16万+

正所谓金三银四，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！

以 Condensing 为核心的 SAP UI5 Flexibility 变更归并机制：原理、分类、实现要点与实战范式

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

10-15

文章摘要： SAP UI5 Flexibility 中的 Condensing 机制通过归并冗余 UI 变更（如多次重命名、移动控件）优化存储与性能。其核心逻辑要求变更处理器实现 getCondenserInfo 方法，并按官方分类（如 LastOneWins、Reverse、Move）返回归并元信息。跨层级或跨版本的变更通常不参与归并。该机制可减少变更文件数量、降低回放复杂度，并提升协作效率。开发时需确保变更类型支持归并分类，并正确实现必要属性（如 uniqueKey、容器索引等）。官方文档提供了分类规则

参与评论您还未登录，请先登录后发表或查看评论

js控制显隐

02-05

js控制显隐，主要是菜单项的控制，包括自动弹出，自动隐藏，代码只是一部分

JS/jquery实现鼠标控制页面元素显隐

weixin_30849591的博客

05-17

173

最近网站要上一个活动广告横幅，当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况，码农们会经常遇到，可以通过javascript或jquery代码实现，下面就几种常见需求一起归纳一下。 mouseout和mouseleave 对于鼠标指针的移入和移出，就涉及到了mouseover、mouseout和mouseleave事件。 mouseover：当鼠标指针移到目标元素时触发...

JS 控制隐藏显示

问天丶天问

03-30

3508

比较简单的实现.style.display就是控制层隐藏或显示的属性.<html><body><script>function show(){document.getElementById("div").style.display="";//alert(document.getElementById("div").style.display)}function ..

js 特效 html 特效鼠标右键显隐效果

09-03

js 特效 html 特效鼠标右键显隐效果 js 特效 html 特效鼠标右键显隐效果

JS显示隐藏DIV(动画效果)

03-10

封装好的JS显示隐藏DIV(动画效果,递增显示,递减隐藏),很实用很炫的效果,已测试支持ie,firefox,safari,opera,谷歌浏览器.有bug和不足处欢迎指正,交流.

前端初学者入门：简易二级导航实现示例

“前端初学者二级导航（超简单的例子）”这一标题所指向的内容，本质上是面向前端开发初学者的一个实践性教学资源，重点在于通过极简的代码示例帮助学习者理解网页中常见的交互功能——二级导航菜单的实现原理。...

一篇文章 - 轻松入门微信小程序

zyh1841474614的博客

01-10

4383

以前学习微信小程序开发时候的笔记,希望能对大家有帮助

让控件不再可被适配：SAP UI5 Deactivating Adaptation of Controls 全面实战与原理

最新发布

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

10-15

SAP UI5 控件适配禁用指南本文系统介绍了在 SAP UI5 中精确关闭控件适配能力的方法，包含：三种内置禁用值：not-adaptable（全禁用）、not-adaptable-tree（子树禁用）、not-adaptable-visibility（仅禁可见性操作）设计时元数据配置：通过控件的 .designtime.js 文件设置适配开关父子控件元数据传播：使用 propagateMetadata 实现软/硬性禁用 Fiori Elements 场景化约束：通过 manifest.json

js 简单实现隐藏和显示

weixin_33827965的博客

06-28

250

<html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv { width:200px; height:100px; line-height:100px; text-align:...

JS高级做的导航条。可展开可挂起。可简化。

zshaodan092011的专栏

04-18

885

导航条在项目中的应用 #divFrame { width: 500px; height: 200px; border: solid 2px #eee; } #divHeader { width:

JS实现点击显示/隐藏

qq_52006379的博客

08-23

5858

JS实现点击显示/隐藏。

JS制作显示隐藏

weixin_57762662的博客

03-08

5826

打开DW按下CTRL+N新建一个HTML文档；首先我们在body标签里写好两个button（按钮）标签，在button标签里面分别分别写好显示与隐藏两个字，让我们更好的区分，当然我们也要给它们设好两个不同的id名，为我们写JS代码做铺垫； 3. 接下来我在button标签下面新建一个div来做我们要隐藏显示的对象，当然也别忘了也给它一个id，这里我就给它id名叫box； 4. 随后我们创建一个style，然后在里面设置div的样式属性，这里可以自己找个图片来做为隐藏显示对象，我嫌麻..

简单js控制div的显示与隐藏