单击按钮应切换相应按钮的 div 的可见性。第一张图片是代码从一开始就应该是什么样子，第二张图片显示了单击提交按钮 1 后代码应该是什么样子。
.toggleDiv{
background: gray;
max-width: 400px;
}<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
<a href="#">Button1</a>
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
<a href="#">Button2</a>
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
<a href="#">Button3</a>
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>最佳答案
您可以通过toggleNav中的标签a找到所有元素，然后添加事件监听器。请参阅我在 Playground 上的示例 https://jsfiddle.net/denisstukalov/ompaeL0d/29/ :
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}
关于javascript - 使用 javascript 切换主 div 内其他 div 的显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61468185/