1

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のハッシュ変更で正しく機能させることができないようです。

誰かが私が間違っていることを見ることができますか？

4

2 に答える 2

1

これは正常に動作しているようです。 http://jsfiddle.net/Mrbaseball34/CQXBx/4/

于 2012-10-08T19:04:36.090 に答える
0

あなたのコードサンプルに基づいて、問題はここにあると思います：

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渡し、本質的に空の配列で呼び出します。idstatebbq

そのコード ブロックの途中にアラートまたはブレークポイントを配置すると、タブが実際に一時的に変化することがわかりますが、インデックス 0 にあるため、最初のタブにリセットされます。これは、hashchangeイベント ハンドラが見つからない場合のデフォルトです。マッチングid。

于 2012-10-08T18:00:18.853 に答える