Question

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

我注意到的问题是它通常显示第一个项目大约1秒或更长时间才显示我点击的项目，我不知道原因是什么，我不知道＆＃39;知道它是否是一个小问题。有办法解决吗？

脚本和我的HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

项目页面的HMTL：

＆＃13;

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

＆＃13;

Answer 1

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

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

.html？选项=＆＃34;名称＆＃34;脚本故障

1 个答案: