Javascript JS或CSS-广告页面：如何仅显示特定类别的添加？

我想做一个广告页面。每个广告都以卡片/张贴的形式出现。我有一个带有类别的顶部菜单，我不想只显示用户单击的类别的卡片

这里有一个例子

要启用此功能，我必须执行哪些操作？ 我是否必须为每个类别指定一个类名，然后放入：

display: block;
or
display: none;

?？ 另外，我可以只使用CSS，还是必须使用Javascript

---

请注意，我正在尝试学习香草Javascript，因此如果没有jquery，我将非常感谢您的回答：）

对于纯css解决方案，您可以使用收音盒实现水平手风琴效果。你可以搜索收音机和手风琴

基于您提供的代码，您可以尝试以下操作

ul{
列表样式：无；
保证金：0；
填充：0；
}
.类别选项卡输入{
显示：无；
}
.类别{
位置：相对位置；
显示器：flex；
}
.类别选项卡标签{
边缘底部：5px；
右边距：5px；
边框：1px点粉色；
填充物：5px 5px；
}
#类别输入：选中~.teste{
显示器：flex；
}
睾丸{
位置：绝对位置；
显示：无；
左：0；
顶部：30px；
}
.卡片{
最大高度：100px；
宽度：245px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
字号：0.85em；
线高：1.5em；
右边距：15px；
溢出：隐藏；
边界半径：5px；
过渡：最大高度3s；
}

伊莫布


表1

项目1

Lorem Ipsum只是印刷的虚拟文本



表1

项目2

Lorem Ipsum只是印刷的虚拟文本



表1

项目3

Lorem Ipsum只是印刷的虚拟文本



表1

项目4

Lorem Ipsum只是印刷的虚拟文本





更新


表2

项目1

Lorem Ipsum只是印刷的虚拟文本



表2

项目2

Lorem Ipsum只是印刷的虚拟文本





均衡


表3

项目1

Lorem Ipsum只是印刷的虚拟文本



表3

项目2

Lorem Ipsum只是印刷的虚拟文本



表3

项目3

Lorem Ipsum只是印刷的虚拟文本

每个类别是一个单独的页面，还是所有类别都在一个页面上（例如选项卡）？另外，您是否计划构建单页应用程序（通过AJAX）或传统网站？单页。不是标签。例如，在“家”中，所有的广告都是可见的。单击某个类别时，所有其他类别都会消失。关于AJAX或传统网站…不知道每个类别的含义：）新手这里有一种方法可以通过选项卡（HTML、CSS、JS）实现这一点，这里有一个完整的示例：（如果使用Bootstrap，请查看：）。或者，您确实可以使用JS切换

display

属性，方法是为每个类别附加一个事件处理程序，该处理程序将隐藏所有其他广告，并仅显示与单击的类别相关的广告。第三种选择是使用AJAX，特别是如果广告可能会发生变化（在实际应用程序中会发生变化）。不用担心，如果您计划构建一个真正的应用程序，那么我绝对建议您先看看AJAX。Vanilla JS示例：和jQuery方法：-jQuery确实使其更易于管理。