以下是一个示例代码,演示如何根据点击的按钮来显示或隐藏对应的数据:
HTML部分:
数据1
数据2
数据3
CSS部分:
.data {
display: none;
}
JavaScript部分:
const buttons = document.querySelectorAll('.btn');
const datas = document.querySelectorAll('.data');
buttons.forEach(button => {
button.addEventListener('click', function() {
const target = this.getAttribute('data-target');
datas.forEach(data => {
if (data.getAttribute('id') === target) {
data.style.display = 'block';
} else {
data.style.display = 'none';
}
});
});
});
在上述代码中,我们首先通过querySelectorAll
选择所有的按钮和数据元素,并为每个按钮添加一个点击事件监听器。当点击按钮时,我们获取其data-target
属性的值,该值对应于要显示的数据元素的id
属性。然后,我们遍历所有数据元素,根据其id
属性来判断是否要显示或隐藏该元素。
在CSS部分,我们将所有数据元素的display
属性设置为none
,以便默认情况下它们都是隐藏的。
下一篇:不显示底部弹窗