jquery - 引导选项卡 + 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);
});

在此代码块中，您试图获取id具有tabbable类的最近元素，但最近的匹配元素没有id属性。然后，您将空id属性传递给并使用一个基本上为空的数组进行state调用。bbq

如果您在该代码块的中间放置一个警报或断点，您可以看到该选项卡实际上确实会立即更改，但随后会重置到第一个选项卡，因为它位于索引 0 处，这是您的hashchange事件处理程序在找不到时默认设置的位置一个匹配的id。