显示/隐藏多个div的Javascript [英] Show/Hide Multiple Divs Javascript

问题描述

寻找一个好的JavaScript来帮助我用按钮隐藏/显示多个div单击不是一个href点击，因此我可以在博客中使用它。
我一直在寻找答案，并且一直无法找到使用JavaScript和/或CSS的好答案。我有点新手，所以请忍受我。
以下是我的代码，但我想简化它，并使其工作，以便它将关闭div，当我再次单击适当的按钮。

css

 < head> 
< style> 
＃myDIV1 {
 width：150px; 
 height：150px; 
 background-color：lightblue; 
 display：none; 
} 
 
 
＃myDIV2 {
 width：150px; 
 height：150px; 
 background-color：lightblue; 
 display：none; 
} 
 
 
＃myDIV3 {
 width：150px; 
 height：150px; 
 background-color：lightblue; 
 display：none; 
} 
 
 
＃myDIV4 {
 width：150px; 
 height：150px; 
 background-color：lightblue; 
 display：none; 
} 
 
< / style> 
< / head> 
  

我知道有一种更简单的方法，但这是我能找到的唯一方法，我希望它在大部分时间内完成

html

 < ;主体> 
 
< p>点击按钮可查看div。< / p> 
 
< button onclick =myFunction1（）>一个< /按钮> 
 
< button onclick =myFunction2（）>两个< / button> 
 
< button onclick =myFunction3（）>三< / button> 
 
< button onclick =myFunction4（）>四个< /按钮> 
 
< div id =myDIV1> 
 
这是div1元素。 
 
< / div> 
 
< div id =myDIV2> 
 
这是div2元素。 
 
< / div> 
 
< div id =myDIV3> 
 
这是div3元素。 
 
< / div> 
 
< div id =myDIV4> 
 
这是div4元素。 
 
< / div> 
  

Javascript

 < script> 
 
 function myFunction1（）{
 
 document.getElementById（myDIV1）。style.display =block; 
 
 document.getElementById（myDIV2）。style.display =none; 
 
 document.getElementById（myDIV3）。style.display =none; 
 
 document.getElementById（myDIV4）。style.display =none; 
 
 
 $ b函数myFunction2（）{
 
 document.getElementById（myDIV1）。style.display =none; 
 
 document.getElementById（myDIV2）。style.display =block; 
 
 document.getElementById（myDIV3）。style.display =none; 
 
 document.getElementById（myDIV4）。style.display =none; 
 
 
 
 function myFunction3（）{
 
 document.getElementById（myDIV1）。style.display =none; 
 
 document.getElementById（myDIV2）。style.display =none; 
 
 document.getElementById（myDIV3）。style.display =block; 
 
 document.getElementById（myDIV4）。style.display =none; 
 
 
 
 function myFunction4（）{
 
 document.getElementById（myDIV1）。style.display =none; 
 
 document.getElementById（myDIV2）。style.display =none; 
 
 document.getElementById（myDIV3）。style.display =none; 
 
 document.getElementById（myDIV4）。style.display =block; 
 
} 
 
< / script> 
  

任何帮助都会预先感谢。

myStyle.css ， myScript.js / strong>， index.html

添加 css 和<$ c $在 html 文件中加入c> js 文件，例如 -

< link rel =stylesheettype =text / csshref =myStyle.css>


登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.