[英]Click an anchor to reveal hidden div beneath, then hide all other content divs?
I've created 4 containers which can be clicked to reveal content beneath.我创建了 4 个容器,可以单击它们以显示下面的内容。 I would like to show only one hidden div at once.
我想一次只显示一个隐藏的 div。 So, if a user clicks another container, all others are hidden.
因此,如果用户单击另一个容器,则所有其他容器都将被隐藏。 Current I cannot hide any of the containers once they have been clicked.
当前,一旦单击它们,我就无法隐藏任何容器。 I really appreciate any help:)
我真的很感激任何帮助:)
JS JS
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
CSS CSS
html, body { height: 100%; padding: 0 ; margin: 0; }
a { width: 100%; height: 100%; color: #000; display: block; position: absolute; background: #647070; }
.section { width: 49.9%; height: 49.9%; float: left; position: relative; overflow: hidden; }
#div1, #div3 { border-right: 1px solid black; }
#div3, #div4 { border-top: 1px solid black; }
HTML HTML
<div id="div1" class="section">
<div id="festival">
<a href="#" onclick="toggle_visibility('festival');" style="">Festival™</a>
</div>
<p>This is the content of Q1</p>
</div>
<div id="div2" class="section">
<div id="register">
<a href="#" onclick="toggle_visibility('register');" style="">Register</a>
</div>
<p>This is the content of Q2</p>
</div>
<div id="div3" class="section">
<div id="connect">
<a href="#" onclick="toggle_visibility('connect');" style="">Connect</a>
</div>
<p>This is the Q3 content.</p>
</div>
<div id="div4" class="section">
<div id="forth">
<a href="#" onclick="toggle_visibility('forth');" style="">Forth</a>
</div>
<p>This is the Q4 content.</p>
</div>
You could add something like this:您可以添加如下内容:
var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}
This will loop through each of the .section
and show the direct div of it.这将遍历每个
.section
并显示它的直接 div。
Demo演示
function toggle_visibility(id) { var divsToHide = document.querySelectorAll(".section > div") for (var i = 0; i < divsToHide.length; i++) { divsToHide[i].style.display = "block"; } var e = document.getElementById(id); if (e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; }
html, body { height: 100%; padding: 0; margin: 0; } a { width: 100%; height: 100%; color: #000; display: block; position: absolute; background: #647070; }.section { width: 49.9%; height: 49.9%; float: left; position: relative; overflow: hidden; } #div1, #div3 { border-right: 1px solid black; } #div3, #div4 { border-top: 1px solid black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div1" class="section"> <div id="festival"> <a href="#" onclick="toggle_visibility('festival');" style="">Festival™</a> </div> <p>This is the content of Q1</p> </div> <div id="div2" class="section"> <div id="register"> <a href="#" onclick="toggle_visibility('register');" style="">Register</a> </div> <p>This is the content of Q2</p> </div> <div id="div3" class="section"> <div id="connect"> <a href="#" onclick="toggle_visibility('connect');" style="">Connect</a> </div> <p>This is the Q3 content.</p> </div> <div id="div4" class="section"> <div id="forth"> <a href="#" onclick="toggle_visibility('forth');" style="">Forth</a> </div> <p>This is the Q4 content.</p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.