在JavaScript中实现多个按钮的"点击显示"功能可以通过以下步骤:
<button id="btn1">按钮1</button>
<div id="content1">内容1</div>
<button id="btn2">按钮2</button>
<div id="content2">内容2</div>
<!-- 添加更多按钮和内容区域 -->
div[id^="content"] {
display: none;
}
// 获取按钮和内容区域的引用
var btn1 = document.getElementById("btn1");
var content1 = document.getElementById("content1");
var btn2 = document.getElementById("btn2");
var content2 = document.getElementById("content2");
// 添加点击事件监听器
btn1.addEventListener("click", function() {
// 切换内容区域的显示状态
if (content1.style.display === "none") {
content1.style.display = "block";
} else {
content1.style.display = "none";
}
});
btn2.addEventListener("click", function() {
// 切换内容区域的显示状态
if (content2.style.display === "none") {
content2.style.display = "block";
} else {
content2.style.display = "none";
}
});
// 添加更多按钮的事件处理
通过以上步骤,你可以在JavaScript中实现多个按钮的"点击显示"功能。每个按钮点击时,对应的内容区域将切换显示或隐藏状态。你可以根据需要添加更多按钮和内容区域,并为它们添加相应的事件处理。
领取专属 10元无门槛券
手把手带您无忧上云