2016-10-22 46 views
0

所以我有大约20个项目要显示在我的网站上,因为我不想为每个项目创建20个HTML文件,所以我使用此脚本将人员链接到他们点击的具体项目。所以链接是这样的:http://mywebsite.com/projects.html?option="project1".html?option =“name”脚本故障

我注意到的问题是,它通常显示第一个项目约1秒或更长的时间,然后它显示我点击的项目,我不知道是什么原因,我不知道不知道这是否是一个小故障。有没有办法解决它?

剧本和我的html:

$(document).ready(function() { 
 
    var url = window.location.href; 
 
    option = url.match(/option=(.*)/)[1]; 
 
    showDiv(option); 
 
}); 
 

 
function showDiv(option) { 
 
    $('.boxes').hide(); 
 
    $('#' + option).show(); 
 
}
<a href="projects.html?option=haivinh" class="permalink"> 
 
    <div class="desktop-3 mobile-half columns"> 
 
     <div class="item"> 
 
     <h3>Sleep infographic</h3> 
 
     <span class="category">Motion graphics</span> 
 
     <div class="imgwrapper"> 
 
      <div class="imgcon"> 
 
       <img src="images/thumb_item07.gif" /> 
 
      </div> 
 
      <div id="view">view</div> 
 
     </div> 
 
     </div> 
 
     <!-- // .item --> 
 
    </div> 
 
    <!-- // .desktop-3 --> 
 
</a>

项目页面的HMTL:

<div class="container"> 
 
<div class="boxes" id="haivinh"> 
 
    <div class="sidebar full-width"> 
 
     <div class="desktop-6 tablet-12 columns"> 
 
     <!-- 
 
      .sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates 
 
      --> 
 
     <div class="box-info"> 
 
      <h4 class="border-top"> 
 
      Metro train ad</h3> 
 
      <p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p> 
 
     </div> 
 
     <!-- // .box-info --> 
 
     </div> 
 
     <!-- // .desktop-6 --> 
 
    </div> 
 
</div>

+2

阅读** FOUC **。 – Amit

回答

1

我的猜测是您默认显示项目1.您可以这样说,因为您的showDiv()函数以.hide()开头。由于您的功能直到document.ready才运行,您可能会在运行该功能之前的短时间内看到初始设置。

要解决这个问题,请确保所有内容都隐藏在之前运行您的js。