引導選項卡+ jQuery BBQ

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（tabs-left）與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);
});

在此代碼塊中，您嘗試獲取具有tabbable類的最接近元素的id ，但最接近的匹配元素沒有id屬性。 然后，您將空的id屬性傳遞給state ，並使用一個本質上為空的數組調用bbq 。

如果在該代碼塊的中間放置一個警報或斷點，則可以看到該選項卡實際上確實會暫時更改，但隨后會重置為第一個選項卡，因為它位於索引0處，這是您的hashchange事件處理程序默認無法使用的值找到匹配的id 。