Javascript 页面加载时显示的隐藏表单

页面加载时显示的隐藏表单元素。我尝试使用此代码，但在加载页面后也隐藏了此代码

这是我的html/PHP代码

 <div id="i1" class="hidden1" style="position:relative;  overflow:hidden;">
 <?php   
    $record = mysqli_query($con,"SELECT DISTINCT Tread_Design FROM db WHERE Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='I1' or Tread_Design='R3'");
 while ($row = mysqli_fetch_array($record)) 
 {
    echo "<input  type='checkbox' name='".$row['Tread_Design']."' value='".$row['Tread_Design']."'>"."&nbsp;"
    .$row['Tread_Design']."&nbsp;";
  }
 ?>

---

您引用了错误的类名

隐藏属性设置为class

hidden

，您已经应用了class

hidden1

应该是：

<div id="i1" class="hidden" style="position:relative;  overflow:hidden;">
<!-- Observe the class name, you have given display:none property to class hidden not hidden1-->

基本上，您需要在页面加载时隐藏一些元素

稍后可以显示它们

因此，使用

display:none

属性

这将在页面加载时加载元素，但会隐藏它们

---

这非常简单，不需要javascript/jQuery。

您的容器使用的是

hidden1

，而不是css中定义的

hidden

。更改容器的类或样式中的类名。

您应该首先将CSS放在头部。。。所以他们会先加载

//change your css
div#extraControls
{
  display: none;
}

然后html。。。因此浏览器不会显示隐藏的表单 然后JS。。。在页脚处，以便最后加载并删除类

顺便说一句，在你的CSS中指向错误的类名。它应该隐藏起来

div.hidden1
{
display: none
}

---

在您的HTML中，我可以看到错误的css类

class=“hidden1”

。请更正。id为“控制外”的

div

在哪里？如果您使用id

i1

引用

div

，那么在JS代码中，您应该像

$（“div#i1”）。removeClass（“隐藏”）当我发布问题时，这是一个输入错误。仍然不起作用那是我发帖时的错误。仍然没有工作，我修正了这一点，但是页面加载后隐藏的元素也使用了不透明度：0；因此，它将隐藏的元素，而不是混乱的页面。请把答案作为接受，这样问题将得到解决。。。很容易让其他人也有同样的问题来得到答案..是的，当我试图点击“接受”按钮时，提示我等待几分钟很高兴知道，非常感谢。！
<div id="i1" class="hidden" style="position:relative;  overflow:hidden;">
<!-- Observe the class name, you have given display:none property to class hidden not hidden1-->

//change your css
div#extraControls
{
  display: none;
}

div.hidden1
{
display: none
}