Javascript 如何使用HTML/CSS创建数据切换？

我发布了一个链接，指向我正在制作的布局的图片。我没有任何jQuery和JavaScript方面的经验；那么，有没有一种方法可以用纯HTML/CSS3创建这样的数据切换

---

我认为纯CSS是没有办法的，因为CSS伪类只允许您检查按钮是否处于活动状态，就像您按下按钮时一样尝试此操作并保持按下状态：

您可以为所有按钮指定不同的id，例如#button1、#button2、#button3

对于过滤器，还有不同的过滤器#过滤器1、#过滤器2、#过滤器3

然后在css中执行类似的操作

#button1:active ~ #filter1 {
 //your changes to the css
}

但这只是暂时的，如果您真的不想使用JQuery，那么您可以尝试使用复选框并以更好的方式设置它们的样式以满足您的需要，然后使用“：checked”伪类

像

---

对于“关闭”按钮，您不会仅使用css，如果您愿意，我可以给您JQuery代码：）

不理解您的问题您是否希望根据单击3个按钮中的哪一个来更改底部块中的数据？我的意思是，当我单击其中一个按钮时，按钮面板顶部将出现一个覆盖层，显示其他内容和元素。如果我想返回按钮面板，我将单击左上方的“X”图标。谢谢您的回答！请你把它标为已解决还是投票表决