當通過url最初選擇不同的選項卡時處理延遲加載選項卡＃

Question

我正在適應一個網站與幾個內容繁重的選項卡，以便他們懶惰地加載時，或者如果他們第一次單擊。要做到這一點，我已經寫了下面的jQuery：

$(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) 
      }); 
    } 
    }); 
}); 

在HTML我有：

<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中的#bb激活第二個選項卡？

我的其他可能的方向是訪問URL並拆分＃來提取bb，如果我找到它，則加載第二個選項卡，但是通過這樣搜索，似乎表明我會是opening my script up to potential security risks。

我應該補充說，如果它始終是第一個在開始時打開的標籤，那麼我就不會在jquery中包含#aa，並且會放入真正的內容，而不是「加載」到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')); 
}); 

SO禮儀問題，只有評論請。發佈問題然後在24小時內自行解決問題是否有任何問題？