Html 显示/隐藏多个 Div Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31799603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide Multiple Divs Javascript
提问by Michael Valentine
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger. I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me. Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
寻找一个好的 JavaScript 来帮助我通过单击按钮而不是单击 href 来隐藏/显示多个 div，以便我可以在博主中使用它。我一直在寻找答案，但一直找不到使用 JavaScript 和/或 CSS 的好答案。我是个新手，所以请多多包涵。以下是我的代码，但我想简化它并使其工作，以便在我再次单击适当的按钮时关闭 div。
css
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>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
我知道有一种更简单的方法，但这是我能找到的唯一方法，它适用于我希望它在大多数情况下做的事情
html
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
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";
}
function 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>
Any help would be appreciated thanks in advance.
任何帮助将不胜感激，提前致谢。
回答by royki
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
我建议先分离你的代码 - 然后它会更干净和可重用 - 比如myStyle.css， myScript.js，index.html
Add the cssand jsfile in the htmlfile like -
在文件中添加css和js文件，html如 -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src-> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
src-> 表示文件的源路径。在这里，我假设我们所有的css, js, 'html' 文件都在同一个地方。
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}<div class="main_div">
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a> |
<a href="#" onclick="divVisibility('Div2');">Div2</a> |
<a href="#" onclick="divVisibility('Div3');">Div3</a> |
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>回答by Learner
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggleand than you can do this:
如果您想同时隐藏/显示所有 div，则必须为所有 div 提供相同的类，例如：.toggle并且您可以这样做：
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
如果您想一次隐藏/显示一个 div，则可以使用 id 执行此操作：
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
使用不同的按钮：
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
在这里传递id：
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
回答by Michael Valentine
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
我通过 .toggle 函数找到了我想要的答案，感谢您的帮助。我在这里找到的答案：radomsnippets.com
回答by jerryurenaa
We can easily add an unlimited amount of buttons using reusable code.
我们可以使用可重用代码轻松添加无限数量的按钮。
here is a full example! Enjoy
这是一个完整的例子！享受
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>