按下按钮时使用 JavaScript 显示/隐藏 div(并且首先隐藏所有 div)

2024-01-10

我是 javascript 新手,我无法从缝合隐藏 div 开始,我可以让 div 在彼此之间切换,任何帮助都会很棒

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

您可以通过添加内联样式来隐藏所有 div:

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1"  style="display:none">text 1</div>
<div id="id2"  style="display:none">text 2</div>
<div id="id3"  style="display:none">text 3</div>

在这里查看它的工作情况:http://jsbin.com/suhok/2/ http://jsbin.com/suhok/2/

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

按下按钮时使用 JavaScript 显示/隐藏 div(并且首先隐藏所有 div) 的相关文章

  • html画布绘图显示出来

    我确信这个问题在我还找不到答案之前就已经被问过 我想通过在顶部绘制另一个白色矩形来擦除黑色矩形的一部分 但是许多原始黑色矩形显示出来 就像正在平均一样 canvas document getElementById canvas contex
  • 调整大小时标题不响应

    我有一个表格 当我调整大小时它不会显示我的标题Steps在网络视图上 它确实显示得很完美 但是当我调整大小时 我看不到我的步骤标题 有没有办法使用 css 或 jstl jsf 标签在下面的代码中修复此问题 谢谢您的帮助 像这样的事情 ht
  • 使用媒体查询将 CSS 应用于除 IE 之外的所有浏览器

    我找到了一种将媒体查询应用于 IE 的方法 media ms high contrast none ms high contrast active 有没有办法将 CSS 应用于除 IE 之外的所有浏览器 就像是 media not ms h
  • onClick 在 p 标签上无法正常工作

    我想为每个绑定一个点击事件 p 但它似乎不能正常工作 当我运行脚本时 我立即收到三个警报 我只想在单击三个中的任何一个时获得它们 p p s 谁能告诉我我做错了什么 编辑 抱歉 这就是它的样子 HTML 应该是这样的 p p class s
  • escape()、encodeURI()、encodeURIComponent() 之间的区别

    在 JavaScript 中 它们之间有什么区别 escape unescape encodeuri decodeuri encodeURIComponent decodeURIComponent 对于有视觉头脑的人来说 这里有一个表格显示
  • HTML 表格换行列

    我有一个表 用户将数据输入到列中 每次用户输入数据时都会创建一个新列 一段时间后 他们有大量的专栏 我需要它们换行 我知道如何将文本换行在列内 但我需要将整个列换行在第一列下方 依此类推 您不应该为此使用表格 您应该使用具有 float l
  • 如何偏移网格项目,同时移动其兄弟项目? [复制]

    这个问题在这里已经有答案了 我正在使用 CSS 网格 我想偏移一个元素 以便它在网格列上水平移动 我还希望这个元素保留其当前宽度 并应用偏移值此外到元素的宽度 Example container display grid grid temp
  • Twitter-Typeahead 不提供建议

    我正在尝试使用twitter typeahead rails 我的目的是当我在 Typeahead 输入框中键入内容时 通过下拉框建议模型 User 的实例 但是 当我打字时什么也没有发生 有人看到我的代码有什么问题吗 Gemfile ge
  • 元视口标签似乎被完全忽略或没有效果

    我把这个标签放在了头部一个网页 http www belovedobjects de 由于某种原因 它在我的 iPhone 上似乎被忽略了 甚至添加了user scalable no没有影响 我尝试了许多宽度 初始比例等值 似乎没有任何效果
  • JavaScript:发送 POST,重定向到响应

    我有一个带有 onclick 的图像 当单击事件触发时 我想发送 HTTP POST 并将 window location 重定向到 POST 的响应 我怎样才能做到这一点 只需将按钮绑定到表单元素的提交方法 重定向就会自然发生
  • Chrome 扩展 - 使用 javascript 定期运行并永久记录数据

    目前 我有一个脚本 当单击右上角托盘中的图像 仅适用于一个特定允许的网站 时 它会扫描 HTML 页面 然后输出一些值 此扫描和输出是单个 JS 文件中的函数 称为 checkData js 即使用户没有主动使用选项卡但它已打开 是否有可能
  • 从字符串中提取所有链接

    我有一个 javascript 变量 其中包含页面的 HTML 源代码 不是当前页面的源代码 我需要从该变量中提取所有链接 关于什么是最好的方法的任何线索 是否可以为变量中的 HTML 创建一个 DOM 然后遍历它 我不知道这是否是推荐的方
  • 如何使用 Angular/Ionic/JS 显示 Motion JPEG 二进制数据流?

    我正在为设备编写应用程序 此类设备将收到 POST 请求 并发回multipart x mixed replace二进制数据流 我必须在我的应用程序主页的一部分上显示此类流 我查了一下 这种情况的资源非常有限 到目前为止 我发现如果 Mot
  • JQuery 从 Div 中抓取文本减去子元素[重复]

    这个问题在这里已经有答案了 有没有一种简单的方法可以从这个 div 中获取文本而不获取任何子元素 div strong Title Text Unwanted strong This is the text I need div 我知道我可
  • > 有必要吗?

    我现在开发网站和 XML 接口已有 7 年了 从来没有遇到过真正有必要使用 gt for a gt 到目前为止 所有消歧都可以通过引用来处理 lt and alone 有没有人遇到过这样的情况 与 SGML 处理 浏览器问题 XSLT 等相
  • 如何根据角度6中的条件禁用复选框?

    我的html代码 div div div div
  • 在现有 HTML 输入字段中加载图像/徽标 - UIWebView

    因为我是编程新手 所以我做了这样的事情 void completeUserFieldsForWebView UIWebView webView withUsername NSString username TextField Which h
  • 如何检查打开的跨域窗口是否准备好接收postmessage?

    我从另一个域启动一个 URL 然后向它发送消息 const child window open http urlfromanotherdomain com child postMessage you cant handle the mess
  • 使用 JavaScript 将图像上传到 Web 服务

    我需要从 javascript 将图像上传到网络服务 我必须发送一个 json 字符串和一个文件 图像 在java中我们有MultipartEntity 我在java中有以下代码 HttpPost post new HttpPost aWe
  • 什么是 Service Worker 控制台? & 它在 Chrome 浏览器中的什么位置?

    我正在研究推送通知并遇到一个陌生的术语 service worker console 我已阅读并使用过该术语console log or web console在浏览器中 但我不熟悉这个术语service worker console 之后

随机推荐