引導標籤+ jQuery的燒烤

Question

http://jsfiddle.net/Mrbaseball34/CQXBx/3/

HTML：

<div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li class="active"> 
      <a href="#tab1">Profile Settings</a> 
     </li> 
     <li> 
      <a href="#tab2">Email &amp; Password</a> 
     </li> 
     <li> 
      <a href="#tab3">Phone Numbers</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <span>Tab1</span> 
     </div> <!-- tab1 --> 
     <div class="tab-pane active" id="tab2"> 
      <span>Tab2</span> 
     </div> <!-- tab2 --> 
     <div class="tab-pane active" id="tab3"> 
      <span>Tab3</span> 
     </div> <!-- tab3 --> 
    </div> 
</div> 

的Javascript：

$(document).ready(function() { 
    var tabs = $('.tabbable'), 
    tab_a_selector = '.nav-tabs a'; 

    tabs.find(tab_a_selector).click(function(e){ 
     e.preventDefault(); 
     $(this).tab('show'); 
     var state = {}, 
     // Get the id of this tab widget. 
     id = $(this).closest('.tabbable').attr('id'), 
     // Get the index of this tab. 
     idx = $(this).parent().prevAll().length; 
     // Set the state! 
     state[id] = idx; 
     $.bbq.pushState(state); 
    }); 

    $(window).on('hashchange', function (e) { 
     tabs.each(function() { 
      var idx = $.bbq.getState(this.id, true) || 0; 
      $(this).find(tab_a_selector).eq(idx).triggerHandler('click'); 
     }); 
    }) 

    .trigger('hashchange'); 
}); 

CSS：

body { background: #fff; } 

我似乎無法得到Bootstrap Tabbable（標籤左）與BBQ的hashchange正常工作。

任何人都可以看到我做錯了什麼？

Answer 1

這似乎正常工作。 http://jsfiddle.net/Mrbaseball34/CQXBx/4/

Answer 2

基於您的代碼示例，我相信這個問題是在這裏：

tabs.find(tab_a_selector).click(function(e){ 
    e.preventDefault(); 

    $(this).tab('show'); 
    var state = {}, 
    // Get the id of this tab widget. 
    id = $(this).closest('.tabbable').attr('id'), 
    // Get the index of this tab. 
    idx = $(this).parent().prevAll().length; 
    // Set the state! 
    state[id] = idx; 
    $.bbq.pushState(state); 
}); 

在此代碼塊你想獲得最接近元素的id與tabbable類，但最近的匹配元素沒有id屬性。然後，您將空的id屬性傳遞給state，並調用bbq，並使用基本上爲空的數組。

如果你把警報或斷點在該代碼塊的中間，你可以看到該標籤實際上並改變短暫但隨後得到恢復到第一個選項卡，因爲它是在指數0，這是你的hashchange事件處理程序的默認值時它找不到匹配的id。