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那么你可以删除整个这个完整的代码块，新提交的选项卡不会被聚焦。