[英]javascript toggle to show only one div at a time in a group
The code below toggles individual divs correctly, however, it shows enabled divs below each other as I toggle but I need to " show only one at a time ". 下面的代码正确地切换了各个div,但是,当我切换时,它在彼此下方显示了启用的div,但是我需要“ 一次仅显示一个 ”。 Any idea? 任何想法?
function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
<ul class="post-advanced-menu"> <li><a href="#" onclick="toggle_visibility('source');">Source</a></li> <li><a href="#" onclick="toggle_visibility('share');">Share</a></li> <li><a href="#" onclick="toggle_visibility('report');">Report</a></li> </ul> <div id="post-advanced-content"> <div id="source" style="display: none;">Source</div> <div id="share" style="display: none;">Share</div> <div id="report" style="display: none;">Report</div> </div>
Thanks, 谢谢,
You should hide other Elements before visible the selected one. 您应该先隐藏其他元素,然后才能看到所选元素。
function toggle_visibility(id) { const target = document.getElementById(id); if (!target) return; // Hide all other div elements. const divs = document.querySelectorAll('.div'); for (const div of divs) { div.style.display = 'none'; } // Show selected one target.style.display = 'block'; }
div { width: 20px; height: 20px; } #source { background: red; } #share { background: blue; } #report { background: green; }
<ul class="post-advanced-menu"> <li><a href="#" onclick="toggle_visibility('source');">Source</a></li> <li><a href="#" onclick="toggle_visibility('share');">Share</a></li> <li><a href="#" onclick="toggle_visibility('report');">Report</a></li> </ul> <!-- Source --> <div id="source" class="div" style="display: none;"></div> <!-- Share --> <div id="share" class="div" style="display: none;"></div> <!-- Report --> <div id="report" class="div" style="display: none;"></div>
One solution is to hide other items before click. 一种解决方案是在单击之前隐藏其他项目。
It also hides the clicked div if it's visible. 如果可见,它还会隐藏单击的div。
You can add a class for each div. 您可以为每个div添加一个类。 For example: class="item"
, in order to help in the process. 例如: class="item"
,以便在此过程中提供帮助。
<ul class="post-advanced-menu">
<li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
<li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
<li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>
<!-- Source -->
<div id="source" class="item" style="display: none;">1</div>
<!-- Share -->
<div id="share" class="item" style="display: none;">2</div>
<!-- Report -->
<div id="report" class="item" style="display: none;">3</div>
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none'
} else {
document.querySelectorAll('.item').forEach(function(div) {
div.style.display = 'none';
})
e.style.display = 'block';
}
}
I recommend unobtrusive script using class and data attributes: 我推荐使用类和数据属性的脚本:
window.addEventListener("load", () => document.querySelectorAll(".post-advanced-menu").forEach( ele => ele.addEventListener("click", e => { var tgt = e.target; var id = tgt.getAttribute("data-id"); document.querySelectorAll(".toggle").forEach( ele => ele.style.display = ele.id == id ? "block" : "none") }) ) )
.toggle { display: none }
<ul class="post-advanced-menu"> <li><a href="#" data-id="source">Source</a></li> <li><a href="#" data-id="share">Share</a></li> <li><a href="#" data-id="report">Report</a></li> </ul> <!-- Source --> <div id="source" class="toggle">Source</div> <!-- Share --> <div id="share" class="toggle">Share</div> <!-- Report --> <div id="report" class="toggle">Report</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.