文章·资料 电脑软件 手机应用 网站源码




    本 站 搜 索
   推 荐 文 章        More...
华硕易电脑(ASUS Eee PC 1025C..
先来段开场白:为了外出携带方便,到淘..
Acronis True Image 使用说明
  一款可以在Windows下使用全部功..
Norton Ghost 使用详解
一、分区备份   使用Ghost进行系..
    文 章 阅 读 排 行
手机视频监控 APP 关闭广告:萤..
一、萤石云视频:我的,设置,隐私设置,..
常见数据库介绍与对比(SQL Serv..
常见数据库的对比分析,涵盖你提到的 A..
Windows 系统修改默认文件类型..
Windows 系统文件类型图标,通常由默..
Windows 系统安装或备份时 ISO,..
【ISO 文件】 ISO 文件其实就是光..
Microsoft SQL Server 2000 Per..
  对于第一次安装 Microsoft SQL Se..
颜色与英文单词对照
颜色与英文单词对照 red green bl..
PakePlus 构建 APP 需要 Github..
PakePlus 是一个基于 Rust Tauri 的..
主页真的越Google、越简洁越好吗
  如果你在11月10日早上打开雅虎中..
网络工程师必懂的专业术语
路由器问题:1、什么时候使用多路由协..
为啥现在的电脑都不能安装 Wind..
说实话,这几年如果你尝试在新电脑..
 文 章 信 息
使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个
评论()〗〖留言〗〖收藏
〖文章分类:电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项
<Script Language="JavaScript">
<!--
function GuDIVShowHidden(GuDIVShowHiddenA,GuDIVShowHiddenB,GuDIVShowHiddenC, GuDIVShowHiddenD,GuDIVShowHiddenE,GuDIVShowHiddenF) {
if (GuDIVShowHiddenA.style.display=="none") {
GuDIVShowHiddenA.style.display="";
if (GuDIVShowHiddenB!=null) {
GuDIVShowHiddenB.style.display="none";
}
if (GuDIVShowHiddenC!=null) {
GuDIVShowHiddenC.style.display="none";
}
if (GuDIVShowHiddenD!=null) {
GuDIVShowHiddenD.style.display="none";
}
if (GuDIVShowHiddenE!=null) {
GuDIVShowHiddenE.style.display="none";
}
if (GuDIVShowHiddenF!=null) {
GuDIVShowHiddenF.style.display="none";
}
}
else {
GuDIVShowHiddenA.style.display="none";
if (GuDIVShowHiddenB!=null) {
GuDIVShowHiddenB.style.display="none";
}
if (GuDIVShowHiddenC!=null) {
GuDIVShowHiddenC.style.display="none";
}
if (GuDIVShowHiddenD!=null) {
GuDIVShowHiddenD.style.display="none";
}
if (GuDIVShowHiddenE!=null) {
GuDIVShowHiddenE.style.display="none";
}
if (GuDIVShowHiddenF!=null) {
GuDIVShowHiddenF.style.display="none";
}
}
}
//-->
</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 名称),每个层都必须有一个名称。


文章作者:啊估整理  更新日期:2009-08-19
〖文章浏览:〗〖发送文章〗〖打印文章
相关文章 ·使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色2009-07-14
·使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果2009-10-05
·使用脚本(JavaScript)实现同一表单(form)中同时全选/反选/清除两个不同名称的复选框(checkbox)2009-08-19