Einzel-Webseiten-Anzeige Problem

Question

Also ich baute eine Website für ein lokales Computer-Gebäude-Geschäft, und ich entwarf es als eine einzelne Seite Applet. Ich bin im Wesentlichen mit dem HTML fertig, das CSS ist kein großes Problem. Was zu einem Problem wurde, war das Ausblenden und Anzeigen verschiedener Teile der Seite. Aus irgendeinem Grund wird meine script.js nicht erkennen, dass ich nicht alle HTML auf einmal sehen möchte, sondern nur Teile. Jede Hilfe wäre willkommen. Alle Dateien werden unten eingefügt.

<title> Name - Home </title> 
<link rel="stylesheet" type="text/css" href="public/styles.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div id="homePage"> 
    <h4> Welcome to Name </h4> 
    <input id="scheduleButton" class="btn btn-sm scheduleButton" type="button" value="Schedule a phone appointment"> 
    <input id="reviewsButton" class="btn btn-sm reviewsButton" type="button" value="Reviews"> 
    <input id="contactButton" class="btn btn-sm contactButton" type="button" value="Contact Us"> 
    <div class="dropdown"> 
     <br> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Hours <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Sunday: 11:00 am - 8:00 pm</a></li> 
     <li><a href="#">Monday: 2:00 pm - 5:00 pm, 7:00 pm - 9:00 pm</a></li> 
     <li><a href="#">Tuesday: 2:00 pm - 5:00 pm, 7:00 pm - 9:00 pm</a></li> 
     <li><a href="#">Wednesday: 2:00 pm - 5:00 pm, 7:00 pm - 9:00 pm</a></li> 
     <li><a href="#">Thursday: 2:00 pm - 5:00 pm, 7:00 pm - 9:00 pm</a></li> 
     <li><a href="#">Friday: 2:00 pm - 5:00 pm, 7:00 pm - 9:00 pm</a></li> 
     <li><a href="#">Saturday: 11:00 am - 8:00 pm</a></li> 
     </ul> 
    </div> 
</div> 

<div id="schedulePage"> 
    <h4> Schedule an Appointment </h4> 
    <div id="calendar"> 



    </div> 

</div> 

<div id="formPage"> 

    <form id="appt"> 

     <input type="text" name="firstname" placeholder="First Name..."> <br> 
     <br> 
     <input type="text" name="lastname" placeholder="Last Name..."> <br> 
     <br> 
     <input type="text" name="email" placeholder="Email..."> <br> 
     <br> 
     <input type="text" name="phone" placeholder="Callback Number..."> <br> 
     <br> 
     <input type="radio" name="type" value="New"> Schedule an appointment regarding making a computer <br> 
     <input type="radio" name="type" value="Old"> Call about a computer we made <br> 
     <input type="radio" name="type" value="Current"> Ask about the status of your build <br> 
     <input type="radio" name="type" value="Other"> Have a question about something else <br> 
     <input type="submit" name="Submit"> 

    </form> 

</div> 

<div id="contactPage"> 
    <h4> Our Contact Information </h4> 
    <h6> Contact us during our office hours by calling: (999) 999-9999 </h6> 
    <h6> Feel free to email us any time at: email@gmail.com </h6> 
</div> 

<div id="specPage"> 
    <h4> Please enter the specifications you would like in your computer</h4> 
    <form id="specs"> 
     <form id="processor"> 
      <h6> Processor: </h6> 
      <input type="radio" name="AMD"> AMD <br> 
      <input type="radio" name="Intel"> Intel 
     </form> 

     <form id="motherboards"> 
      <h6> Motherboard: </h6> 
      <input type="radio" name="ASUS"> ASUS <br> 
      <input type="radio" name="MSI"> MSI <br> 
      <input type="radio" name="Gigabyte"> Gigabyte <br> 
      <input type="radio" name="ASRock"> ASRock 
     </form> 

     <form id="memory"> 
      <h6> Memory (RAM): </h6> 
      <input type="radio" name="4"> 4 GB <br> 
      <input type="radio" name="8"> 8 GB <br> 
      <input type="radio" name="16"> 16 GB <br> 
      <input type="radio" name="32"> 32 GB 
     </form> 

     <form id="harddrive"> 
      <h6> Hard Drive Size: </h6> 
      <input type="radio" name="500 GB"> 500 GB <br> 
      <input type="radio" name="1 TB"> 1 TB <br> 
      <input type="radio" name="2 TB"> 2 TB <br> 
      <input type="radio" name="X TB"> 2+ TB 
     </form> 

     <form id="tower"> 
      <h6> Tower Type: </h6> 
      <input type="radio" name="mid"> Mid Tower <br> 
      <input type="radio" name="full"> Full Tower <br> 
      <input type="radio" name="mini"> Mini Tower <br> 
      <input type="radio" name="super"> Super Tower 
     </form> 

     <form id="graphics"> 
      <h6> Graphics Card: </h6> 
      <input type="radio" name="evga"> EVGA <br> 
      <input type="radio" name="MSI"> MSI <br> 
      <input type="radio" name="Gigabyte"> Gigabyte <br> 
      <input type="radio" name="ASUS"> ASUS <br> 
     </form> 
     <br> 
     <br> 
     <input type="submit" name="Submit"> 
     <br> 
     <br> 
    </form> 

</div> 

Und das Skript:

var currentID; 

$(document).ready(function (e) { 
    $('#schedulePage').hide(); 
    $('#formPage').hide(); 
    $('#contactPage').hide(); 
    $('#specPage').hide(); 
}); 

CSS sollte irrelevant sein. Danke noch einmal.

Answer 1

Sie brauchen nicht jquery Haut Funktion Gebrauch Bootstrap Haut Klasse

$(document).ready(function (e) { 
    $('#schedulePage').addClass("hide"); 
    $('#formPage').addClass("hide"); 
    $('#contactPage').addClass("hide"); 
    $('#specPage').addClass("hide"); 
}); 

Wie in Bootstrap verwenden 3.3.7 sie CSS für das Ausblenden Klasse als Anzeige gegeben haben: keine Bedeutung;

So stellen Sie sicher, dass Ihre CSS überschreibt diese Eigenschaft nicht

Answer 2

Sie Bootstrap CSS Helper-Klassen für das Ausblenden und Anzeige htm Element verwenden können.

$(document).ready(function (e) { 
    $('#schedulePage').addClass("hidden"); 
    $('#formPage').addClass(".hidden"); 
    $('#contactPage').addClass("hidden"); 
    $('#specPage').addClass("hidden"); 
}); 

Oder

$(document).ready(function (e) { 
     $('#schedulePage').addClass("invisible"); 
     $('#formPage').addClass(".invisible"); 
     $('#contactPage').addClass("invisible"); 
     $('#specPage').addClass("invisible"); 
    });