Question

我使用一些简单的bootstrap创建了一个html页面，并使用一些php链接到数据库。我希望页面在开始时很简单，只有2个部分，当您完成输入并按下一个时，另一个部分变得可见。我尝试使用javascript中的切换可见性来执行此操作但由于某种原因，它要么不在display：none或block之间切换，不接受输入或只是什么也不做。

以下是2个部分，如果有人可以解释为什么以及如何不起作用。

/*Contect style*/

input,
textarea {
  padding: 10px;
  border: 1px solid #E5E5E5;
  width: 200px;
  color: #999999;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
  width: 400px;
  height: 150px;
  max-width: 400px;
  line-height: 18px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
  border-color: 1px solid #C9C9C9;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
  margin-left: 10px;
  color: #999999;
}
.submit input {
  width: 100px;
  height: 40px;
  background-color: #474E69;
  color: #FFF;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
/*sections*/

body {
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
}
@media(min-width:767px) {
  .navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
  }
  .top-nav-collapse {
    padding: 0;
  }
}
.intro-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #fff;
}
.about-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  display: none;
}
.services-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #fff;
  display: none;
}
.reservation-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  display: none;
}
.contact-section {
  height: 100%;
  padding-top: 150px;
  text-align: left;
  background: #fff;
}

<?php $servername="localhost" ; $username="root" ; $password="" ; // Create connection $conn=n ew mysqli($servername, $username, $password); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->select_db("airports"); ?>
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link href="bootstrap.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="scrolling-nav.css" rel="stylesheet" type="text/css" />
  <link href="contactStyle.css" rel="stylesheet" type="text/css" />
  <script src="paymentFormJS.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  <title>Licenta - Rezervare bilete de avion</title>

  <script type="text/javascript">
    <!--
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'none')
          e.style.display = 'block';
        else
          e.style.display = 'none';
      }
      //-->
  </script>
</head>



<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

  <!-- Navigation
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Home</a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#reservation">Reservation</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>-->

  <!-- Intro Section -->
  <section id="intro" class="intro-section section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div style="height: 50px"></div>
          <h1>Tells us what you want!</h1>
          <div style="height: 100px;"></div>
          <form role="form">
            <div class="form-group col-xs-6">
              <h3><label for="departure">Where will you be leaving from</label></h3>
              <input class="form-control input-lg" id="departure" type="text" placeholder="Madrid, Spain" name="source">
            </div>
            <div class="form-group col-xs-6">
              <h3><label for="arrival">Where you will arrive to</label></h3>
              <input class="form-control input-lg" id="arrival" type="text" placeholder="Bucharest, Romania" name="destination">
            </div>
            <div class="form-group col-xs-4" style="margin-left: 33%; margin-top: 100px;">

              <button type="submit" class="btn btn-info btn-lg btn-block" name="city_search" id="aboutBtn" onclick="toggle_visibility('about')">
                <a class="page-scroll-about" href="#about" style="text-decoration: none; color: #ffffff;"> Find it </a>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="about-section">
    <div class="container" style="">
      <div class="row">
        <div class="col-lg-12">
          <h1>Pick a flight</h1>
          <div style="height: 50px;"></div>
          <form role="form">
            <?php if(isset($_GET[ "city_search"])) { $src=$ _GET[ "source"]; $dest=$ _GET[ "destination"]; $query_txt="SELECT * FROM flights WHERE source_city LIKE '%{$src}%' AND destination_city LIKE '%{$dest}%'" ; if($qu=$ conn->query($query_txt)) { while($row = $qu->fetch_row()) { echo "
            <div class=\ "form-group col-xs-12\" style=\ "border: 1px solid black; height: auto\">"; echo "
              <div class=\ " col-lg-6\" style=\ "border-right: 1px solid black; height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
                <p style=\ " margin-top: 25px;\">{$row[1]}</p>"; echo "</div>"; echo "
              <div class=\ " col-lg-6\" style=\ " height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
                <p style=\ " margin-top: 25px;\">{$row[2]}</p>"; echo "</div>"; echo "
              <button type=\ "submit\" class=\ "btn btn-primary btn-sm \" name=\ "flight_id\" value=\ "{$row[0]}\" id=\ "submitBtn{$row[0]}\" style=\ " margin-top: 15px; margin-bottom: 15px;\" onclick=\
              "toggle_visibility('services')\"><a class=\ "page-scroll\" href=\ "#services\" style=\ "text-decoration: none; color: #ffffff;\">Pick a flight</a>
              </button>"; echo "</div>"; } } } ?>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="services-section section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1>Tell us about you</h1>
          <form class="form-horizontal col-lg-6" role="form" style="margin-left: 23%;">
            <div class="form-group">
              <label for="inputdefault">Name</label>
              <input class="form-control" id="inputdefault" type="text" placeholder="John" style="text-align: center;" name="client_name">
            </div>
            <div class="form-group">
              <label for="inputdefault">Surname</label>
              <input class="form-control" id="inputdefault" type="text" placeholder="Doe" style="text-align: center;" name="client_surname">
            </div>
            <div class="form-group">
              <label for="inputdefault">ID</label>
              <input class="form-control" id="inputdefault" type="text" placeholder="1770423112233" style="text-align: center;" name="client_id">
            </div>
            <div class="form-group">
              <label for="inputdefault">Age</label>
              <input class="form-control" id="inputdefault" type="text" placeholder="27" style="text-align: center;" name="client_age">
            </div>
            <div class="form-group">
              <label for="inputdefault">Address</label>
              <input class="form-control" id="inputdefault" type="text" placeholder="Bd. Unirii nr. 144" style="text-align: center;" name="client_address">
            </div>
            <div class="form-group col-xs-3" style="margin-left: 80%; margin-top: 15px;">

              <button type="submit" class="btn btn-info btn-lg btn-block" name="client_flight_id" value="<?php 
                                    if(isset($_GET[" flight_id "]))
                                        echo $_GET["flight_id "];
                                    else
                                        echo "nullb ";
                                    ?>" id="reservationBtn" onclick="toggle_visibility('reservation')">
                <a class="page-scroll" href="#reservation" style="text-decoration: none; color: #ffffff;" onclick="toggle_visibility('reservation')"><span class="glyphicon glyphicon-search"></span> Neext </a>
              </button>

              <?php if(isset($_GET[ "client_flight_id"])) { $client_name=$ _GET[ "client_name"]; $client_surname=$ _GET[ "client_surname"]; $client_id=$ _GET[ "client_id"]; $client_age=$ _GET[ "client_age"]; $client_address=$ _GET[ "client_address"]; $client_flight_id=$
              _GET[ "client_flight_id"]; $query_txt="INSERT INTO clients (name, surname, client_id, age, address, flight_id) VALUES (\" {$client_name}\ ",\"{$client_surname}\ ", {$client_id}, {$client_age}, \"{$client_address}\
              ", {$client_flight_id})"; $conn->query($query_txt); $client_db_id = $conn->insert_id; } ?>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

提前感谢任何回答的人。

Answer 1

刚刚测试了您的代码并在页面底部移动脚本似乎可以解决问题。如果您使用的是Google Chrome，请在使用Javascript时检查您的控制台（Ctrl + Shift + i）。并且在加载所有元素之后应该在页面末尾加载进行DOM操作的Javascript，或者必须使用加载事件才能在元素加载后执行代码。

我在切换可见性方面做错了什么？

1 个答案: