1

HTML：

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
                <div class="tab-pane active" id="home">
                    <p>a</p>
                    <p>very</p>
                    <p>long</p>
                    <p>content</p>
                    <p>string</p>
                    <p>to</p>
                    <p>simulate</p>
                    <p>very</p>
                    <p>long</p>
                    <p>paragraphs</p>
                    <p>for</p>
                    <p>testing</p>
                    <p>purposes</p>
                    <p>only</p>
                    <p>thank</p>
                    <p>you</p>
                    <p>and</p>
                    <p>good</p>
                    <p>morning</p>
                    <p>to</p>
                    <p>you</p>
                    <p>foo</p>
                    <p>bar</p>
                </div>
                <div class="tab-pane" id="profile">
                   Profile Content Here
                </div>
                <div class="tab-pane" id="messages">
                    Messages Content Here
                </div>
                <div class="tab-pane" id="settings">
                    Settings Content Here
                </div>
            </div>

Javascript

if (location.hash !== '')
    {
        $('a[href="' + location.hash + '"]').tab('show');
    }

    $('a[data-toggle="tab"]').on('shown', function(e) {
          return location.hash = $(e.target).attr('href').substr(1);
    });

    $(window).on("hashchange", function(){
        $('a[href="' + location.hash + '"]').tab('show');
    });​

ここにコードとデモがあります

#home以外の他のタブをクリックすると、タブは正常に機能します。ただし、1ページを超える長いコンテンツを含むタブをクリックすると、ページはdivに焦点を合わせ、ビューポートはそれぞれのdivにホームインします。美的には、ページがそのdivにホームインしないことをお勧めします。

これを防ぐ方法はありますか？

4

1 に答える 1

3

focus()返される前に、表示されているイベント ハンドラーへの呼び出しを追加します。

$('a[data-toggle="tab"]').on('shown', function(e) {
    location.hash = $(e.target).attr('href').substr(1);
    $(this).focus();
    return false; // or true - whichever you prefer
});

フィドルを参照してください - http://jsfiddle.net/nVU3r/3/

フィドルを更新しました。$()フォーカス呼び出しを許可するために、要素の周りに追加しました。設定するとlocation.hash、ブラウザは自動的に要素に移動します。元に戻すだけです。

が必要ない場合はlocation.hash、このコード ブロック全体を削除すると、新しく表示されたタブがフォーカスされなくなります。

于 2012-11-12T10:19:03.390 に答える