Javascript 如何获得显示：无可用于窗体内的div

更新：所以当可见性：隐藏从.hide类中删除时，display:none似乎根本不起作用。div显示出来，所以display:none在这里不起作用

更新#2：好的，所以基本上所有的div都有一个.panel类，它处理所有的样式，并有一个display flex，它覆盖了display:none，来自.hide类。现在的问题是如何赋予.hide类更高的优先级而不使用！重要的

     _____________________________________

在我的html中，我有一个表单，表单中有几个div，每个div都有一个按钮，单击该按钮可以向div中添加.hide类，并从下一个div中删除.hide类，直到到达最后一个div，然后表单与所有数据一起提交

所以HTML基本上是这样的：

<form> 
  <div class='panel' id='div1'></div>
  <div class='hide panel' id='div2'></div>
  <div class='hide panel' id='div3'></div>
  <div class='hide panel' id='div4'></div>
</form>

我遇到的问题是，即使div正确地显示和消失，它们似乎仍然在页面上，因此您必须向下滚动大量空屏幕空间才能到达页脚

我假设这与div在表单中这一事实有关，即使div被设置为显示：没有，表单仍然存在，因此它们不会消失

我怎样才能让它工作

---

谢谢

您可以像这样使用

hidden

属性：

constdiv=[…document.querySelectorAll（'div'）；
常量firstDiv=div.shift（）；
firstDiv.onclick=函数操作（事件）{
this.hidden=true；
const nextDiv=div.shift（）；
如果（下一个）{
nextDiv.hidden=false；
nextDiv.onclick=动作；
event.preventDefault（）；
}否则{
//此处没有用于提交表单的默认值
}
}

表单{
边框：1px纯黑；
}

1：隐藏
2：隐藏
3：隐藏
4：隐藏

您只需使用

hidden

属性，如下所示：

constdiv=[…document.querySelectorAll（'div'）；
常量firstDiv=div.shift（）；
firstDiv.onclick=函数操作（事件）{
this.hidden=true；
const nextDiv=div.shift（）；
如果（下一个）{
nextDiv.hidden=false；
nextDiv.onclick=动作；
event.preventDefault（）；
}否则{
//此处没有用于提交表单的默认值
}
}

表单{
边框：1px纯黑；
}

1：隐藏
2：隐藏
3：隐藏
4：隐藏

使用

可见性：隐藏

，元素不可见，但仍占据网页空间。 当显示为“无”时，元素不可见并折叠为整个元素

因此，仅使用

display:none

折叠元素。 不要两者都用

---

更新：如图所示：

使用

可见性：隐藏

，元素不可见，但仍占据网页空间。 当显示为“无”时，元素不可见并折叠为整个元素

因此，仅使用

display:none

折叠元素。 不要两者都用

---

更新：如图所示：只要有两个类，就可以在这两个类之间切换

函数切换（）{
var divs=document.querySelectorAll（'.show'）；
对于（var i=0；i，只要有两个类，就需要像这样在类之间切换


函数切换（）{
var divs=document.querySelectorAll（'.show'）；
对于（var i=0；i这是一个CSS声明被另一个更具体的CSS声明覆盖的情况

在本例中，第二个类，
.panel
正在将
display:flex
应用于div。用户创建了一个CSS类
.hide
，该类应用了
display:none
。由于此处没有明确说明的原因，
.panel
声明比
.hide
声明更具体，因此
.hide
被过度使用

可能是级联的结果：

样式表级联-在一个非常简单的级别上，这意味着
CSS规则的顺序很重要；当应用两个具有相同顺序的规则时
特殊性在CSS中最后一个是
用过

和/或特异性：

特殊性是指浏览器如何决定在多个应用程序中应用哪个规则
规则有不同的选择器，但仍可以应用于同一个选择器
元素。它基本上是衡量选择器的
选择将被取消

最后是继承：

父元素上设置的某些CSS属性值由其
子元素，有些不是

例如，如果在元素上设置颜色和字体族，则每个
其中的元素也将使用该颜色和字体进行样式设置，除非
您已将不同的颜色和字体值直接应用于它们

最终，通过观察浏览器中的开发工具发现了问题。用户可以看到
.hide
显示：none
声明被列为一行，表明它被过度使用

解决方案是使
.hide
CSS声明比
.panel
更具体

这是通过将CSS声明更改为：

div.hide {
   display:none;
}

MDN很好地解释了

在某个时候，你会在一个项目上工作，你会发现你认为应该应用于一个元素的CSS不起作用。通常，问题是你已经创建了两个可能应用于同一个元素的规则。级联和密切相关的特殊性概念是控制哪个规则的机制当存在此类冲突时适用。设置元素样式的规则可能不是您期望的规则，因此您需要了解这些机制是如何工作的

这是一个CSS声明被另一个更具体的CSS声明覆盖的情况

在本例中，第二个类，
.panel
正在应用
display:flexdiv.hide {
   display:none;
}