从 CSS-Class 选择的 X div 中显示 1答案

【问题标题】：Display 1 from X Divs selected by CSS-Class从 CSS-Class 选择的 X div 中显示 1
【发布时间】：2020-03-27 14:26:27
【问题描述】：

我在主页上有 X 个具有 X 个不同类名的 html div 元素：

class="home-1"
class="home-2"
class="home-3"
class="home-4"
等

我的目标是，只显示这些“div”之一。其余的应该用css隐藏。我想，我不能这样做，只能使用 css。

我手动能做的是

.home-1 { display: none; }
.home-3 { display: none; }
.home-4 { display: none; }

所以在本例中显示 home-2。

我当然希望用 javascript 自动化，有人可以帮我吗？

你会非常好！

更新： 我想我写这个问题的时候已经太累了，因为我忘记了一些重要的事情。 aaarggh ;(！！

我想使用 javascript 来确保始终显示“不同”的 div 并自动隐藏其他 div。

【问题讨论】：

你可以给他们所有另一个类，比如.home，然后对类home的所有元素执行display: none。
不完全清楚你想显示的 div 是如何选择的。您是否使用按钮，它是否依赖于 get 变量。在您的示例中，“home-2”元素 'know' 它应该如何可见？
我认为我可以显示所有 div 元素并使用 javascript 随机隐藏除一个以外的所有元素

标签： javascript html css display

【解决方案1】：

是的，CSS 可能。
如果您想 hide all elements 其类名从 home- 开始并添加到特定元素，请添加使用 display:block 属性的 .active 类。类似于下面的 sn-p。

/* Hide all .home-* elements */
[class^="home-"] { display: none; }

/* Show element which has .active class*/
[class^="home-"].active{ display: block; }

<div class="home-1">Home 1</div>
<div class="home-2 active">Home 2</div>
<div class="home-3">Home 3</div>
<div class="home-4">Home 4</div>

【讨论】：

您可能希望扩展您的答案以显示如何应用 active 类，因为如果没有这样的建议，它似乎是不完整的。
@DavidsaysreinstateMonica 感谢您的建议:-) 现在我编辑并定义了 active 类如何工作。
不客气，但是当您展示一个可运行的 sn-p 时，您并没有展示如何将 active 类应用于或删除演示实际的任何元素取决于。
@DavidsaysreinstateMonica 根据问题，没有定义任何功能，例如单击、悬停或 mouseenter... 事件侦听器。对于显示/隐藏元素，所以在这个 sn-p 简单的所有元素都隐藏没有 .active 类但如果有 .active 类，所以这个活动类定义 display:block 显示特定元素的属性。
没关系，尽管我认为这个问题是：“[Of] 当然我希望使用 [JavaScript] 实现自动化，有人可以帮助我吗？”表明这是问题的一个重要部分。这是您的答案，如果您不选择，我不打算投反对票。