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 以外的其他选项卡时，选项卡工作正常。但是，如果我单击包含超过页面的长内容的选项卡，则页面会聚焦在 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 回答