javascript - .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 之前隐藏所有内容。