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');
    });

我有代码和演示here

单击#home以外的其他选项卡时，Tabs工作正常。但是，如果我单击一个长页面超过页面的选项卡，该页面将重点关注导致视口位于相应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，那么您可以删除整个代码块，并且新显示的选项卡不会集中。

Twitter Bootstrap - 标签内容很长时标签无法正常工作

1 个答案: