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

I have code and demo here

Tabs is working fine when clicking on the other tabs other than #home. However, if I click on a tab with long content that is more than a page, the page focuses on the div which causes the the viewport to home in on the respective div. Aesthetically, I would prefer that the page don’t home in to that div.

Is there a way to prevent this?

Answer 1

Add a focus() call to the shown event handler before it returns.

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

see the fiddle – http://jsfiddle.net/nVU3r/3/

Updated the fiddle. I have added $() around the element to permit focus call. When settings the location.hash the browser automatically moves to the element. We simply switch it back.

If you don’t need the location.hash then you can remove the entire this entire code block and newly presented tab wont get focused.