单击一个div使另一个出现并隐藏
[英]Click on a div to make another appear and hide
问题描述
我在body标签中创建了两个div。 一个div不可见，但是我希望通过单击另一个div使其可见，以及再次单击该div使其消失。 基本上，在页面加载时div2不可见，我希望通过单击div1使其可见和隐藏。 请帮忙。 谢谢！
HTML：
<div id="div1"></div>
<div id="div2"></div>
CSS：
#div1{
height: 100px;
width: 100px;
background-color: orange;
}
#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}
6 个解决方案
解决方案1
2 已采纳 2018-06-29 16:01:31
创建一个额外的类，如hidden ，然后单击div1切换该类。 请注意，此答案使用的是javascript，没有它就无法像您在问题中描述的那样进行更改。
document.getElementById('div1').addEventListener('click', () => { document.getElementById('div2').classList.toggle('hidden'); }, false);
#div1 { height: 100px; width: 100px; background-color: orange; } #div2 { height: 100px; width: 100px; background-color: blue; } .hidden { visibility: hidden; }
<div id="div1">Foo</div> <div id="div2" class="hidden">Bar</div>
解决方案2
1 2018-06-29 16:01:16
只要不加任何更改就可以使用CSS，只要#div1具有mouseDown #div2 。
#div1{ height: 100px; width: 100px; background-color: orange; } #div2{ height: 100px; width: 100px; background-color: blue; visibility: hidden; } #div1:active + #div2 { visibility: visible; }
<div id="div1"></div> <div id="div2"></div>
解决方案3
1 2018-06-29 16:05:00
您可以在<script>标记内添加下面给出的javscript脚本。
function myFunction() { var x = document.getElementById("div2"); if (x.style.visibility === "hidden") { x.style.visibility = "visible"; } else { x.style.visibility = "hidden"; } }
#div1{ height: 100px; width: 100px; background-color: orange; } #div2{ height: 100px; width: 100px; background-color: blue; visibility: hidden; }
<div id="div1" onclick="myFunction()"></div> <div id="div2"></div>
解决方案4
1 2018-06-29 16:27:40
您也可以按照以下方式进行操作。
<script> function toggleFunction() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); if (div1.style.display === "none") { div1.style.display = "block"; div2.style.display ="none"; } else { div1.style.display = "none"; div2.style.display="block"; } } </script>
<div id="div1" onclick="toggleFunction();">div1</div> <div id="div2" onclick="toggleFunction();">div2</div>
解决方案5
1 2018-06-29 18:04:46
该问题已经回答，并且答案很好。 我想分享另一种完全是CSS的解决方法。 它通常被称为“ checkbox hack ”，它在几年前非常流行（大量的演示是由不使用JS的轻便型游戏制作的）。
想法是使用组合标签/复选框，将state （复选框）应用于DOM，并使用:checked伪类直观地表示该state 。 在您的示例中，我们可以修改标记，并添加我们的输入/标签，例如：
<input type="checkbox" id="triggerVisibility"></input>
<div id="div1">
<label for="triggerVisibility" id="label1"></label>
</div>
<div id="div2"></div>
需要注意的重要一件事是，您的复选框应位于要应用“状态”的元素之前。 这是因为，对于CSS，我们将使用sibling选择器（ +或~ ）
#triggerVisibility:checked ~ #div2 {
visibility: visible;
}
在我们的例子中，我们使用的是更“宽松”的通用同级选择器（ ~ ），这意味着在选中复选框后，输入ID为“ triggerVisibility”的任何内容的可见性都将设置为visible。 太酷了吧？
这是一个小提琴，其中包含其他“状态”（例如内容），我们在选中/取消选中输入时会对其进行更改：
解决方案6
-1
在这里查看完整的详细信息：
$("#div1").click(function(){ // alert("hi"); $("#div2").toggleClass("Active"); });
#div1{ height: 100px; width: 100px; background-color: orange; cursor:pointer } #div2{ height: 100px; width: 100px; background-color: blue; visibility: hidden; } .Active{ visibility: visible!important; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <div id="div1">Div 1</div> <div id="div2">Div 2</div> </body> </html>
当单击标题时，是否使信息显示在另一个div上以获取信息？
[英]When click on title, make information appear on another div for the information?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.