Question

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

这是我的 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;";
  }
 ?>

这是页面

    <script type="text/javascript">
 $(function() {
   $('#i1').hide();
   $('#mylist').change(function () {
   if ($('#mylist').val() == "TURF") {
     $('#i1').show();
     $('#i1').show();
     } else {
    $('#i1').hide();
   $('#i1').hide();
   }
});
 });

我使用的页面后面的代码隐藏起来

div.hidden
{
  display: none
}

  $(document).ready(function() {
  $("div#extraControls").removeClass("hidden");
});

Answer 1

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

Answer 2

你应该首先将CSS放在头部...所以他们将首先加载然后是html ...所以浏览器不会显示隐藏的表单然后JS ...在页脚，所以它将加载最后并删除类

你的CSS中的btw指向错误的类名。它应该隐藏1

div.hidden1
{
display: none
}

Answer 3

你指的是错误的班级名称。

隐藏属性设置为类hidden，您已应用了类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。

Answer 4

您的容器使用{c}中定义的hidden1而不是hidden。更改容器的类或样式中的类名。

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

4 个答案: