.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

あなたはshowDiv()関数が.hide()で始まるので、これを知ることができます。 document.readyまで機能が実行されないため、機能を実行する前に短時間の初期設定が表示されることがあります。

この問題を解決するには、のすべてが非表示になっていることを確認してから、 jsを実行してください。