帖子标题
类别1
帖子内容
实现在不改变布局的情况下显示特定类别的帖子可以通过以下步骤进行:
帖子标题
类别1
帖子内容
.post {
display: block;
}
.post.hide {
display: none;
}
// 获取所有帖子元素
const posts = document.querySelectorAll('.post');
// 获取类别选择器元素
const categorySelector = document.querySelector('#category-selector');
// 监听类别选择器的变化
categorySelector.addEventListener('change', (e) => {
const selectedCategory = e.target.value;
// 遍历所有帖子元素
posts.forEach((post) => {
// 获取帖子的类别标签
const category = post.querySelector('.category').textContent;
// 检查帖子的类别是否与选择的类别匹配
if (category === selectedCategory) {
post.classList.remove('hide'); // 显示匹配的帖子
} else {
post.classList.add('hide'); // 隐藏不匹配的帖子
}
});
});
在上述代码中,我们根据选择的类别值,遍历所有帖子元素,通过检查帖子的类别标签来判断是否与选择的类别匹配。如果匹配,我们移除hide
类来显示帖子,否则添加hide
类来隐藏帖子。
最后,你需要根据自己的需求调整HTML结构、CSS样式和JavaScript代码。