使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个_

[会员中心] [发布文章][发布软件] [中文繁體]

本站搜索

推荐文章 More...

	华硕易电脑(ASUS Eee PC 1025C).. 先来段开场白：为了外出携带方便，到淘..

	Acronis True Image 使用说明　　一款可以在Windows下使用全部功..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进行系..

文章阅读排行

	Microsoft SQL Server 2000 Perso.. 　　对于第一次安装 Microsoft SQL Se..

	MD5 算法的ASP实现代码　　MD5的全称是Message-Digest Algor..

	BIOS 设置不能修改等问答5则　　问：电脑配置为：微星865PE主板、P4..

	Windows 系统修改默认文件类型图标 Windows 系统文件类型图标，通常由默..

	夸克网盘新用户注册如何获得1T空间夸克网盘，新用户注册如何获得1T空间？ ..

	VMware Workstation：新添加的硬.. VMware Workstation 新添加的硬盘不..

	CMD：Windows 系统 CMD 命令添加.. 查看全部用户账号： net user 查..

	Microsoft Internet Information .. 　　简称：IIS，版本：5.0，运行环境：Wind..

	关于使用 CSS 来控制 table 标签.. 　　在 HTML 语言中，table 标签的 cel..

	使XHTML Strict 支持 target 标签 XHTML 1.0 Strict 之后就不支持 targe..

文章信息

使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个

〖评论()〗〖留言〗〖收藏〗

〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗

<Script Language="JavaScript">

</Script>

<input type="button" name="Button_DIV_1" onclick="JavaScript:GuDIVShowHidden(GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第一个层，同时关闭其它的层"><br>
<input type="button" name="Button_DIV_2" onclick="JavaScript:GuDIVShowHidden(GuDIV_2,GuDIV_1,GuDIV_3,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第二个层，同时关闭其它的层"><br>
<input type="button" name="Button_DIV_3" onclick="JavaScript:GuDIVShowHidden(GuDIV_3,GuDIV_1,GuDIV_2,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第三个层，同时关闭其它的层"><br>
<input type="button" name="Button_DIV_4" onclick="JavaScript:GuDIVShowHidden(GuDIV_4,GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_5,GuDIV_6);" value="显示/隐藏第四个层，同时关闭其它的层"><br>
<input type="button" name="Button_DIV_5" onclick="JavaScript:GuDIVShowHidden(GuDIV_5,GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_4,GuDIV_6);" value="显示/隐藏第五个层，同时关闭其它的层"><br>
<input type="button" name="Button_DIV_6" onclick="JavaScript:GuDIVShowHidden(GuDIV_6);" value="显示/隐藏第六个层，其它层不影响">
<br>
<br>
<div id="GuDIV_1" style="display:none">第一个层</div>
<div id="GuDIV_2" style="display:none">第二个层</div>
<div id="GuDIV_3" style="display:none">第三个层</div>
<div id="GuDIV_4" style="display:none">第四个层</div>
<div id="GuDIV_5" style="display:none">第五个层</div>
<div id="GuDIV_6" style="display:none">第六个层</div>

这是我目前想到的最简单的同时只显示一个层，并关闭其它相应的层，最多支持六个，显示一个，隐藏五个，如果只有一个层，只需附带一个参数即可，就像“显示/隐藏第六个层”。如果一个网站有多个页面需要使用到此效果，不必在每个页面都嵌入代码，做一个.js 文件链接，所有页面都直接调用（蓝色部分的代码即是参数，层的 id 名称），每个层都必须有一个名称。

<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">   
<title>使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个__当佰网</title>   
</head>   
   
<body>   
  
<Script Language="JavaScript">  
  
</Script>  
  
<input type="button" name="Button_DIV_1" onclick="JavaScript:GuDIVShowHidden(GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第一个层，同时关闭其它的层"><br>  
<input type="button" name="Button_DIV_2" onclick="JavaScript:GuDIVShowHidden(GuDIV_2,GuDIV_1,GuDIV_3,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第二个层，同时关闭其它的层"><br>  
<input type="button" name="Button_DIV_3" onclick="JavaScript:GuDIVShowHidden(GuDIV_3,GuDIV_1,GuDIV_2,GuDIV_4,GuDIV_5,GuDIV_6);" value="显示/隐藏第三个层，同时关闭其它的层"><br>  
<input type="button" name="Button_DIV_4" onclick="JavaScript:GuDIVShowHidden(GuDIV_4,GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_5,GuDIV_6);" value="显示/隐藏第四个层，同时关闭其它的层"><br>  
<input type="button" name="Button_DIV_5" onclick="JavaScript:GuDIVShowHidden(GuDIV_5,GuDIV_1,GuDIV_2,GuDIV_3,GuDIV_4,GuDIV_6);" value="显示/隐藏第五个层，同时关闭其它的层"><br>  
<input type="button" name="Button_DIV_6" onclick="JavaScript:GuDIVShowHidden(GuDIV_6);" value="显示/隐藏第六个层，其它层不影响">  
<br>  
<br>  
<div id="GuDIV_1" style="display:none">第一个层</div>  
<div id="GuDIV_2" style="display:none">第二个层</div>  
<div id="GuDIV_3" style="display:none">第三个层</div>  
<div id="GuDIV_4" style="display:none">第四个层</div>  
<div id="GuDIV_5" style="display:none">第五个层</div>  
<div id="GuDIV_6" style="display:none">第六个层</div>  
   
</body>   
</html>

文章作者：啊估整理更新日期：2009-08-19

〖文章浏览：〗〖发送文章〗〖打印文章〗

相关文章	·使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色 2009-07-14 ·使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果 2009-10-05 ·使用脚本(JavaScript)实现同一表单(form)中同时全选/反选/清除两个不同名称的复选框(checkbox) 2009-08-19

当佰网【关于·免责声明】

本站使用【啊估文章软件站】网站系统〖网站管理员留言簿〗

闽ICP备08009617号

文章·资料	电脑软件	手机应用	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业教学学习编程·数据库游戏	鸿蒙安卓苹果其他	HTML·CSS·JavaScript PHP .NET ASP JSP