在同一页面上使用具有相同ID的多个(动态)切换按钮,可以通过以下步骤实现:
以下是一个示例代码,演示如何在同一页面上使用具有相同类名的多个切换按钮:
HTML部分:
<button class="toggle-btn">按钮1</button>
<button class="toggle-btn">按钮2</button>
<button class="toggle-btn">按钮3</button>
<div id="content1" class="toggle-content">内容1</div>
<div id="content2" class="toggle-content">内容2</div>
<div id="content3" class="toggle-content">内容3</div>
CSS部分:
.toggle-content {
display: none;
}
.show {
display: block;
}
JavaScript部分:
// 获取所有切换按钮
var toggleBtns = document.getElementsByClassName('toggle-btn');
// 给每个按钮添加点击事件监听器
for (var i = 0; i < toggleBtns.length; i++) {
toggleBtns[i].addEventListener('click', function() {
// 获取按钮的索引
var index = Array.prototype.indexOf.call(toggleBtns, this);
// 获取对应的内容元素
var content = document.getElementById('content' + (index + 1));
// 切换内容的显示状态
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
}
在上述示例中,我们使用相同的类名"toggle-btn"来标识切换按钮,并使用不同的ID来标识每个内容元素。通过点击按钮,对应的内容元素会切换显示或隐藏。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云