gpt4 book ai didi

javascript - 单击 anchor 以显示下面隐藏的 div,然后隐藏所有其他内容 div?

转载 作者:太空宇宙 更新时间:2023-11-04 00:42:13 25 4
gpt4 key购买 nike

我创建了 4 个容器,单击它们可以显示下面的内容。我想一次只显示一个隐藏的 div。因此,如果用户单击另一个容器,则所有其他容器都会被隐藏。当前,一旦单击它们,我就无法隐藏任何容器。我真的很感谢任何帮助:)

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

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

  <div id="div1" class="section">
<div id="festival">
<a href="#" onclick="toggle_visibility('festival');" style="">Festival&trade;</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>

最佳答案

你可以添加这样的东西:

var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}

这将遍历每个 .section 并显示它的直接 div。

演示

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&trade;</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>

关于javascript - 单击 anchor 以显示下面隐藏的 div,然后隐藏所有其他内容 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58063783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com