为什么div隐藏但不显示？
[英]Why is the div hiding but not showing?
问题描述
I am trying to make a program that, when a button is pressed, a function is called and everything is hidden except one div. 
我正在尝试制作一个程序，当按下一个按钮时，将调用一个函数，并且除一个div外，其他所有内容都被隐藏。 But I don't understand why this isn't working. 但是我不明白为什么这行不通。 If there is some simple fix, I would be grateful, but I may be going about this problem completely wrong. 如果有一些简单的解决方法，我将不胜感激，但是我可能会完全解决此问题。
function myFunction() { var x = document.getElementById("div1"); var y = document.getElementById("main"); y.style.display = "none"; x.style.display = "block"; };
#div1 { width:50px; height:50px; background-color: blue; } #div2 { width:50px; height:50px; background-color: red; } #div3 { width:50px; height:50px; background-color: green; }
<html> <body> <div id="main"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <button onclick="myFunction()">Show only Div 1</button> </div> </body> </html>
I'm trying to do this without jQuery, but if that is the only way possible to achieve what I am trying to do, then I will use that. 我正在尝试不使用jQuery，但是如果这是实现我正在尝试的唯一方法，那么我将使用它。
Edit: Suppose I have lots of divs. 编辑：假设我有很多div。 Is there any quick way to hide all of them but one, without jQuery, without having to individually go through all the divs and hide them? 有没有一种快速的方法可以隐藏所有这些，而没有一种无需jQuery，而不必单独遍历所有div并隐藏它们呢？
5 个解决方案
解决方案1
2 已采纳 2018-07-14 20:36:26
You should really use a class instead, and addEventListener , as inline script is not recommended and neither are altering styles inline. 您实际上应该使用一个类，并使用addEventListener ，因为不建议使用内联脚本，也不应该内联更改样式。
On button click, add a class to the main and then use its CSS rule to hide the chosen div , eg using the nth-child(n+2) or :not(:first-child) 单击button ，将一个类添加到main类，然后使用其CSS规则隐藏所选的div ，例如使用nth-child(n+2)或:not(:first-child)
Stack snippet 堆栈片段
document.querySelector('button').addEventListener('click', function() { document.getElementById("main").classList.toggle('hideallbutdiv1'); })
#div1 { width:50px; height:50px; background-color: blue; } #div2 { width:50px; height:50px; background-color: red; } #div3 { width:50px; height:50px; background-color: green; } #main.hideallbutdiv1 div:nth-child(n+2) { /* or div:not(:first-child) */ display: none; }
<html> <body> <div id="main"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <button>Show only Div 1</button> </div> </body> </html>
Here is spiced version using a pseudo element to toggle the text on the button 这是使用伪元素切换按钮上的文本的加粗版本
document.querySelector('button').addEventListener('click', function() { document.getElementById("main").classList.toggle('hideallbutdiv1'); })
#div1 { width:50px; height:50px; background-color: blue; } #div2 { width:50px; height:50px; background-color: red; } #div3 { width:50px; height:50px; background-color: green; } button::before { content: attr(data-show) } #main.hideallbutdiv1 div:nth-child(n+2) { display: none; } #main.hideallbutdiv1 button::before { content: attr(data-hide) }
<html> <body> <div id="main"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <button data-show="Show only Div 1" data-hide="Show all"></button> </div> </body> </html>
解决方案2
1 2018-07-14 20:30:59
There's no need to hide the container. 无需隐藏容器。 Simply hide the div you are targetting: 只需隐藏您定位的div：
function myFunction() {
var x = document.getElementById("div1");
var y = document.getElementById("div2"); // change it to div2 NOT main
y.style.display = "none";
x.style.display = "block";
};
解决方案3
1 2018-07-14 20:45:14
In order to hide all the children of main except the div1 , you have to hide all the siblings of div1 directly. 为了隐藏除div1之外main所有子项，您必须直接隐藏div1所有兄弟姐妹。
The function to get siblings would look like this: 获取兄弟姐妹的函数如下所示：
function getSiblings(elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
var skipMe = elem;
for ( ; sibling; sibling = sibling.nextSibling )
if ( sibling.nodeType == 1 && sibling != skipMe )
siblings.push( sibling );
return siblings;
}
Your button click handler: 您的按钮点击处理程序：
function myFunction() {
var x = document.getElementById("div1");
var siblings = getSiblings(x);
siblings.forEach(function(y){
y.style.display = "none";
});
}
解决方案4
0 2018-07-14 20:27:01
Don't hide the container, or it will hide all its children. 不要隐藏容器，否则它将隐藏所有子容器。
function myFunction() { var x = document.getElementById("div1"); var y = document.getElementById("div2"); y.style.display = "none"; x.style.display = "block"; };
#div1 { width:50px; height:50px; background-color: blue; } #div2 { width:50px; height:50px; background-color: red; }
<html> <body> <div id="main"> <div id="div1"></div> <div id="div2"></div> <button onclick="myFunction()">Show only Div 1</button> </div> </body> </html>
Edit: hide your button too using the same method, if you really want only div1. 编辑：如果确实只需要 div1，也可以使用相同的方法隐藏按钮。
解决方案5
0 2018-07-14 20:34:30
you are hiding main which contains all 3 divs. 您正在隐藏包含所有3个div的main 。
function myFunction() { var x = document.getElementById("div1"); // <- you dont need this cause its visible initially var y = document.getElementById("div2"); var z = document.getElementById("div3"); x.style.display = "block"; // <- you dont need this cause its y.style.display = "none"; z.style.display = "none"; };
#div1 { width:50px; height:50px; background-color: blue; } #div2 { width:50px; height:50px; background-color: red; } #div3 { width:50px; height:50px; background-color: green; }
<html> <body> <div id="main"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <button onclick="myFunction()">Show only Div 1</button> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.