Javascript 从CSS类选择的X个div中显示1

在主页上，我有X个html div元素，其中包含X个不同的类名：

• 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实现自动化，有人能帮我吗

你会很好的

更新： 我想我写这个问题的时候已经太累了，因为我忘记了一些重要的事情。阿格；（

---

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

是的，可以通过

CSS

如果要

隐藏类名从home-开始的所有元素
，并将其添加到特定元素，则添加。使用
显示：block
属性的活动类


/*隐藏所有.home-*元素*/
[class^=“home-”]{display:none；}
/*显示具有.active类的元素*/
[class^=“home-”]。活动{display:block；}
Home 1
家2
家3
Home 4
您可以为它们提供另一个类，如
。Home
，然后对具有class
Home
的所有元素执行
显示：none
。您不完全清楚要显示的div是如何选择的。是否使用按钮，它是否依赖于get变量。在您的示例中，“Home-2”是如何选择的元素“知道”它应该是可见的？我想我可以用JavaScript显示所有div元素并随机隐藏除一个之外的所有元素。您可能希望扩展您的答案，以显示如何应用
活动的
类，因为如果没有这样的建议，它似乎是不完整的。@DavidSaySreateMonica感谢您的建议：-）现在，我编辑并定义了
活动的
类与工作的关系。不客气，但在显示可运行的代码段时，并没有显示如何应用或删除
活动的
类，演示实际依赖的任何元素。@davidsaysrestatemonica根据问题，没有定义任何功能，如单击、悬停或鼠标插入。。。事件侦听器。对于show/hide元素，在这个代码片段中，所有元素都隐藏了，它没有
.active
类，但是如果有
.active
类，那么这个活动类定义了show特定元素的display:block属性。这很好，尽管我认为问题是：“[当然]我想用[JavaScript]自动实现这一点。”“有人能帮帮我吗？”这是问题的关键部分。这是你的答案，如果你选择不投票，我不打算投反对票。