单个网页显示问题

-2

因此，我正在为本地计算机构建业务构建网站，并将其设计为单页小程序。我基本上完成了与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 protected] </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应该是无关的。再次感谢。

来源

2017-01-03 scoopfaze

提出了一个捣鼓你面对 –

你能解释一下这个问题？ – scoopfaze

'CSS应该是不相关的'不一定，你可以有一个样式覆盖JavaScript设置什么。 – Steve

你不需要使用jQuery的隐藏功能使用引导程序的隐藏类

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

作为引导3.3.7，他们给了隐藏类CSS为显示：无重要;

只要确保你的CSS不重写这个属性

来源

2017-01-03 06:33:32 Kenny

这似乎不能解决问题。 – scoopfaze

@ user5499487，我知道这不是一个解决方案，虽然看起来像HTML和JS，我没有发现任何错误，这将导致这个问题的一个案例将被css覆盖 – Kenny

这很奇怪，我有一个类似的项目代码非常相似，但CSS似乎没有干扰。我会继续看着它。 – scoopfaze

您可以使用自举CSS助手类隐藏和显示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"); 
    });

来源

2017-01-03 06:38:37

单个网页显示问题

回答

相关问题