Question

所以我正在为本地计算机构建业务构建一个站点，我将其设计为单页小程序。我基本上完成了html，CSS不是一个很大的问题。成为问题的是隐藏和显示页面的不同部分。出于某种原因，我的script.js不会认识到我不想一次看到所有的html，而只是部分。任何帮助，将不胜感激。所有文件都粘贴在下面。

<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>

脚本：

var currentID; 

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

CSS应该无关紧要。再次感谢。

Answer 1

你不需要使用jquery的hide函数使用bootstrap的hide class

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

在bootstrap 3.3.7中，他们为hide类提供了CSS display：none！important;

请确保您的css未覆盖此属性

Answer 2

您可以使用Boostrap CSS Helper Classes隐藏和显示htm元素。

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

或者

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

单个网页显示问题

2 个答案: