.html?option="name“脚本故障

Question

所以我有大约20个项目要在我的网站上展示，因为我不想为每个项目创建20个HTML文件，所以我使用这个脚本将人们链接到他们点击的特定项目。因此链接类似于：http://mywebsite.com/projects.html?option="project1"

我注意到的问题是，在显示我点击的项目之前，它通常会显示第一个项目大约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>

​

Answer 1

我的猜测是您默认显示项目1，因为您的showDiv()函数以.hide()开头。由于您的函数在document.ready之前不会运行，因此在运行函数之前，您可能会看到一小段时间的初始设置。

要解决此问题，请确保在运行js之前隐藏了所有内容。