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

最新推荐文章于 2025-12-02 21:41:05 发布

最新推荐文章于 2025-12-02 21:41:05 发布 · 121 阅读

文章标签：

#xhtml #javascript #ViewUI

本文提供了一个使用JavaScript实现页面上多个DIV元素显示与隐藏效果的示例。通过点击不同的按钮，可以切换显示不同的DIV内容，其余DIV则被隐藏。此示例展示了基本的DOM操作及事件处理技巧。

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

关注关注

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、容器索引等）。官方文档提供了分类规则

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

JSF 2.0中的隐式导航

一名可爱的技术搬运工

05-23

212

在JSF 1.2中，所有页面导航都需要在“ faces-config.xml ”文件中声明，如下所示： ... <navigation-rule> <from-view-id>page1.xhtml</from-view-id> <navigation-case> <from-outcome>page2&l...

HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解

weixin_34060561的博客

06-09

5579

导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...

Javascript左边导航条的例子

11-26

自已写的左边导航的例子，源代码很少，支持火狐和IE和Chrome，开发给大家共享，如果有问题或分享，

CSS 导航条 10个实例

03-22

NULL 博文链接：https://af8991.iteye.com/blog/977375

导航条实例(哔哩哔哩部分)

维克多噗噗的博客

05-14

2567

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name=

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

vincent

07-22

544

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> function fn(num){ var i; for(i=1;i var divtar=document.getElementById("div"+i);

js实用例子

jamv163的专栏

10-21

503

js学习笔记，别错过！很有用的。 ///////////////////////////////////////////////////////////////////////////////////////// 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数（用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax

javascript实用例子

weixin_30646315的博客

04-08

100

javascript实用例子大全！

zzrsrs的博客

08-17

1030

javascript实用案例

狼迹~无痕

07-24

490

一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数（用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间，形如 (13:04:06) 2.2 短日期，形如 (2003-12-05) 2.3 长时间，形如 (2003-12-05 13:04:06)

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

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

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

zyh1841474614的博客

01-10

4364

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

让控件不再可被适配：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

一个导航条的例子

sufeinet

05-22

1258

本文链接：http://user.qzone.qq.com/361983679/blog/1211386526 大家快做项目了，一定会想到过自己的导航条怎么做呢，这是我做的一个小例子，我个人让为呢还行，有那位朋友想用的话

HTML - 换行标签的 3 种写法（＜br＞、＜br/＞、＜br /＞）

weixin_52173250的博客

11-05

319

HTML - 换行标签的 3 种写法（<br>、<br/>、<br />）

Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue