Twitter的引導 - 標籤不能正常工作時，標籤的內容很長

Question

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之外的其他選項卡。但是，如果我點擊一個頁面長度超過一頁的標籤，頁面將重點關注導致視口在各個div上放置的div。從美學角度而言，我寧願頁面不會回到那個div。

有沒有辦法來防止這種情況？

Answer 1

在返回之前，將一個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那麼你可以刪除整個這個完整的代碼塊，新提交的選項卡不會被聚焦。