JavaScript - 隐藏所有其他 div

2023-11-22

我有许多 div,仅在单击链接后才可见。如何关闭所有打开的div,以便只有单击的div可见?
我正在使用这个.js:

    function showhide(id){
        if (document.getElementById) {
        var divid = document.getElementById(id);
        divid.style.display = (divid.style.display=='block'?'none':'block');
        } }

        <a href="javascript:void(null)" onclick="showhide('features');">features</a>
<a href="javascript:void(null)" onclick="showhide('design');">design</a>
<a href="javascript:void(null)" onclick="showhide('create');">create</a>

谢谢 乌里


一种方法是添加一个类并基于该类查找元素来隐藏它们(如其他答案所示)

另一种方法是将元素的状态存储在对象中,并使用它来识别需要关闭的打开元素。

var divState = {}; // we store the status in this object
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);

        divState[id] = (divState[id]) ? false : true; // initialize / invert status (true is visible and false is closed)
        //close others
        for (var div in divState){
            if (divState[div] && div != id){ // ignore closed ones and the current
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; // reset status
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

Demo at http://jsfiddle.net/gaby/LfzYc/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript - 隐藏所有其他 div 的相关文章

  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • TFS 2010 - 在完成“撤消挂起的更改”后,有什么方法可以恢复我的更改吗?

    完成 撤消挂起的更改 后 有什么方法可以恢复我在本地计算机中所做的更改吗 我认为这是不可能的 但我仍然想知道是否有人知道一种方法 如果你有not在 撤消挂起的更改 之后构建您的项目 您可以在 Reflector 中打开 dll 并复制正确的
  • “__get__”参数之一是否多余? [复制]

    这个问题在这里已经有答案了 正如这里所描述的 https docs python org 3 reference datamodel html object get 传递给 get 方法的两个参数 self 除外 分别是访问属性的对象和类
  • Fluent Assertions 可以对 IEnumerable 使用字符串不敏感的比较吗?

    我有一对列表 我正在尝试使用流畅的断言进行比较 我可以轻松地编写比较代码 但我想使用 Fluent Assertions 以便我可以获得在测试失败消息中显示的原因 到目前为止我所看到的所有内容似乎都使用默认的 Object Equals 比
  • 如何将 JRUBY_OPTS 与 RVM 一起使用?

    似乎在基于 RVM 的 Rails 项目中向 JRuby 提供标志的惯用方法是设置环境变量 JRUBY OPTS 或 PROJECT JRUBY OPTS 后者可能是自动完成的 因为我看到我可以从项目目录中取消注释这一行 rvmrc PRO
  • 如何以不同用户身份运行 nohup 而不生成两个进程?

    我试图 nohup 一个命令并以不同的用户身份运行它 但每次我这样做都会生成两个进程 例如 nohup su s bin bash nobody c my command gt outfile txt 这肯定以无人身份运行 my comma
  • pytest 是否应该从虚拟环境中的依赖模块收集测试?

    我正在尝试在另一台笔记本电脑上设置一个项目 而不是我的典型开发机器 这个项目有几个基于 pytest 的测试 是我在项目的整个生命周期中编写的 当我跑步时 pytest k tests my test py 我从 sqlalchemy 测试
  • 使用默认值从 SelectList 创建 DropDownListFor

    我有一个dropdownlistfor Html DropDownListFor model gt model Item Item Status new SelectList Model AllStatus id Description n
  • 在 dc.js 中向饼图添加图例

    我正在构建一个基于 dc js 的可视化 其中一个图表是饼图 看 http jsfiddle net luiseth t8we6 我的情况的特殊性在于 该图表将显示的标签通常相当长 以至于通常会被图表的容器 div 所以我想到让它们出现在图
  • Objective-C 查找方法的调用者

    有没有办法确定某个代码行method是从哪里打电话来的 堆栈我希望这有帮助 NSString sourceString NSThread callStackSymbols objectAtIndex 1 Example 1 UIKit 0x
  • 如何从Matlab中的regionprops(Image,'BoundingBox')获取矩形子图像?

    我在较大的图像中识别出了一些粒子 并且需要将每个粒子解析为较小的图像 我已经使用了regionprops BoundingBox 函数 但还没有成功 现在如何使用 BoundingBox 制作图像 I 的矩形子图像 我可以使用 Boundi
  • C++,防止在堆栈上创建类实例(在编译期间)

    我知道有一些方法可以通过阻止用户使用来防止在堆上创建类new and delete操作员 我正在尝试做相反的事情 我有一个类 我想阻止用户在堆栈上创建它的实例 并且只有使用new运算符将编译 更具体地说 我希望以下代码在编译期间收到错误 M
  • Java方法描述符中美元符号的含义?

    例如 它是 Jikes RVM 堆栈的一部分 at 0x70cfba90 0x708cfaa4 Lorg apache lucene index SegmentInfos access 000 Ljava lang String V at
  • 数字值包含逗号——如何使这些数字成为数字? [复制]

    这个问题在这里已经有答案了 我有一整列数字 其中包含数千个逗号分隔符 当我尝试用它们创建一个数字列时 任何超过 999 的值都会变得不适用 我使用了cbind df lt cbind df var2 as numeric as charac
  • 为 JAX-RS 2.0 客户端 API 配置代理

    我有一个在 Java EE 7 应用程序服务器 WildFly 上运行的应用程序 它使用 REST 资源查询另一个服务 在以前的应用程序中 我使用了 Jersey 1 x 客户端 API 对 REST 服务的访问是通过 Web 代理授予的
  • Google 缩放以适合该页面上的所有标记

    我很难弄清楚这一点 我查看了这里和互联网上的示例 但仍然无法使其工作 我有一张 Google v3 地图 其中显示了英国各地的许多标记 我希望能够设置缩放级别以覆盖所选区域中的所有标记 例如 伦敦可能有 50 个标记 格拉斯哥可能有 2 个
  • C++ 中是否有多态性的替代方案?

    The CRTP在这个关于动态多态性的问题中提出了建议 然而 据称这种模式仅对静态多态性有用 我正在考虑的设计似乎受到虚拟函数调用的速度阻碍 因为这里暗示了 甚至 2 5 倍的加速就已经很棒了 所讨论的类很简单 可以完全内联编码 但是直到运
  • 禁用网页上的所有滚动

    我想知道是否可以禁用网页上的所有滚动 我目前正在使用 html body overflow hidden 问题是这在 iOS 设备上不起作用 如果你按住鼠标滚轮并将其向下拖动 你也可以滚动 所以这似乎是一个非常糟糕的问题解决方案 有没有办法
  • Java如何处理内存中的String对象?

    我被问到这个问题 String s abc creates one String object and one reference variable In this simple case abc will go in the pool a
  • C++中的每个表达式都有非引用类型吗

    您好 我正在阅读有关 C 中的表达式和整个语句的内容 声明0 0 每个表达式都有一些非引用类型 引用的语句来自 en cppreference com w cpp language value category 检查页面顶部的第 2 行 现
  • JavaScript - 隐藏所有其他 div

    我有许多 div 仅在单击链接后才可见 如何关闭所有打开的div 以便只有单击的div可见 我正在使用这个 js function showhide id if document getElementById var divid docum