时间戳

首页 > 解决方案 > 在纯 HTML 中隐藏和显示 div？

html - 在纯 HTML 中隐藏和显示 div？

问题描述

如果这个问题没有足够的细节，我深表歉意；我对 Web 开发和编程非常陌生。

我在 div 上方有三个按钮，我想使用这些按钮来更改 div 的外观。很难解释，所以我制作了一个粗略的线框，我已经在这个问题的其余部分链接了它。

当所有三个按钮都被选中时，我希望三个较小的 div 出现在我的较大 div 中，如下所示

图像1

当按下两个按钮时，我希望它看起来像 图像3 只按下一个按钮时，我希望它看起来像这样。

图2

如您所见，我希望按下（和取消按下）按钮来切换较小 div 的存在，如果可能的话，根据选择的按钮数量（即，当两个按钮被选中，两个小 div 的大小都是大 div 的一半，等等）。如果这可以在纯 HTML 中完成，而不需要任何 JavaScript 或像 jQuery 这样的库，我会非常喜欢。

我觉得这是一件很常见的事情，因为我确信我以前见过类似的东西。但是，我找不到任何与我正在寻找的完全匹配的教程，我什至找不到现有的示例（因此我将这些图片链接起来）。我将不胜感激任何帮助，特别是如果您能指出一些源代码或一些示例。

标签： htmlcss

解决方案

可以使用以下技巧在 CSS 中实现：https ://codeburst.io/awesome-checkbox-and-radio-button-css-hacks-a8c24fb15a95

实际上，您的“按钮”似乎更像单选/复选框，因为它们应该保持“活动”？除非您的意思是它们必须保持按下状态，但在这种情况下，不可能同时按下它们；-)

不幸的是，您无法仅在 HTML 中实现这一点。

另请记住，从可访问性的角度来看，CSS 解决方案并不是很好，因为您需要将复选框设置为按钮的样式，并且无法修改属性，例如在内容更改时告诉屏幕阅读器aria-haspopup。aria-expanded您可以使用一个aria-live区域作为后备，但最好将按钮与实际“打开”的内容链接起来。

当然，您可以同时使用两者来支持尽可能多的设备。

更新：要在 Javascript 中实现这一点，您也需要复选框，或存储按钮的状态（单击一次将状态设置为“已单击”，另一次取消设置）。每个按钮都会在包含的 DIV 上添加或删除一个类。然后您可以使用 CSS 显示或隐藏，还可以设置辅助 div 的大小。就像是：

.bigdiv > div {
    display: none;
}

.bigdiv.button1 > div:nth-child(1) {
    display: block
}
.bigdiv.button2 > div:nth-child(2) {
    display: block
}
.bigdiv.button3 > div:nth-child(3) {
    display: block
}

要设置大小，您将不得不依赖按钮的组合：

.bigdiv.button1:not(.button2, .button3) > div {
    width: size when only button 1 is pressed
}
.bigdiv.button1.button2:not(.button3) > div {
    width: size when only button 1 and 2 are pressed
}
.bigdiv.button1.button2.button3 > div {
    width: size when button 1,2 and 3 are pressed
}

当然，你必须满足所有按钮的组合，或者简化逻辑，计算按下按钮的数量，并应用额外的类.bigdiv来指示按下了多少，这样你就可以在 CSS 中轻松处理。

正如你所看到的，有很多不同的解决方案来处理这个问题，但是 JS 和 CSS 的混合是最好的，因为你将逻辑与演示分离，而你的 JS 所做的只是添加/删除类。

推荐阅读