最初に別のタブが選択されたときの遅延読み込みタブの処理＃

Question

最初にクリックされたときに読み込みが遅くなるように、いくつかの内容が重いタブのあるサイトに適応します。これを行うために、私は次のjqueryの書いた：私はHTMLで

$(document).ready(function(){ 
    $("#aa,#bb,#cc,#dd,#ee").bind("click", function() { 
    target = $(this).data('target'); 
    section = $(this).data('section'); 
    if ($("#"+target).html() == "Loading") { 
     urlstring = "mysite.com/item-tab.html?item=666&tabType="+section; 
     $.ajax({ url: urlstring }).done(
      function(msg){ 
       $("#"+target).html(msg) 
      }); 
    } 
    }); 
}); 

を：

<ul class="nav nav-pills nav-justified hidden-print"> 
    <li class="first-tab active" id="aa" data-target="specContent" data-section="spec"><a href="#a" data-toggle="pill">Specification</a></li> 
    <li id="bb" data-target="vidContent" data-section="videos"><a href="#b" data-toggle="pill">Videos</a></li> 
    <!-- a bunch more like this --> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane fade active in" id="a"> 
     <h2>Product Specification</h2> 
      <div id="specContent">Loading</div> 
    </div> 

    <div class="tab-pane fade" id="b"> 
     <h2>Product Videos</h2> 
     <div id="vidContent">Loading</div> 
    </div> 
    <!-- a bunch more of these too --> 
</div> 

今、私は壁にヒットしました。通常、最初のタグはページの読み込み時に開かれますが、最後に#bbのURLを介して行われる場合があります。

どのようにして最初から2番目のタブのコンテンツを読み込むことができますか？ URLの#bbから2番目のタブがアクティブになったときに確認できるイベントが発生していますか？

私の他の可能な方向は、URLにアクセスして＃に分割してbbを抽出し、見つかった場合は2番目のタブを読み込みましたが、これを検索すると、私はopening my script up to potential security risksとなるようです。

最初のタブが常に最初に開いていた場合は、#aaをjqueryに含めておらず、divのID = "specContent "

おすすめ、ご提案、またはありがとうございました。

Answer 1

私は＃オプションのURLを分割してしまったので、ここで私自身の質問に答えています。新しいloadTab関数を作成し、それを指すようにonClick部分を設定し、ページ内の要素と一致するURLに '＃'があって、データターゲット属性とデータセクション属性を呼び出す場合は、それを呼び出しました。仕事をしているようだ。

function loadTab(target, section) { 
    if ($("#"+target).html() == "Loading") { 
     urlstring = "mysite.com/item-tab.html?item=666&tabType="+section; 
     $.ajax({ url: urlstring }).done(function(msg){ 
      $("#"+target).html(msg) 
     });  
    } 
} 

if(window.location.href.indexOf('#') > -1) { 
    elem = $(window.location.href.substring(window.location.href.indexOf('#'))); 
    if (elem.length) { 
     target = elem.attr('data-target'); 
     section = elem.attr('data-section'); 
     loadTab(target, section); 
    } 
} else { 
    loadTab('specContent', 'spec'); 
} 

$("#aa,#bb,#cc,#dd,#ee").bind("click", function() { 
    loadTab($(this).data('target'), $(this).data('section')); 
}); 

礼儀の質問、コメントのみお願いします。質問を投稿してから24時間以内に解決しても問題はありませんか？