我在切换可见性时做错了什么
[英]What am i doing wrong in my toggle visibility
问题描述
我使用一些简单的引导程序制作了一个html页面，并使用一些php将其链接到数据库。 我希望页面在开始时很简单，只有2个部分，当您完成输入并按next时，另一部分将可见。 我尝试使用javascript中的切换可见性来执行此操作，但是由于某种原因，它要么无法在显示之间切换：无或阻止，不接受输入或只是不执行任何操作。
如果有人可以解释为什么以及如何不起作用，下面是两个部分。
/*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>
在此先感谢所有回答的人。
1 个解决方案
解决方案1
0 2016-05-28 21:47:02
只需测试您的代码，然后将脚本移至页面底部，即可解决此问题。 如果您使用的是Google Chrome浏览器，那么在使用Javascript时，请务必检查控制台（Ctrl + Shift + i）。 并且，在所有元素加载后，应该在页面末尾加载进行DOM操作的Javascript，或者必须使用load事件在元素加载后执行代码。
如何在我的代码中切换一个类，我做错了什么？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.