Twitter Bootstrap Tabs Href="#" Anchor Tag Jumping

I am using TW Bootstrap's tabs to tab through content on my clients' site I have set the HTML Markup to remove the 'data-toggle' as I need to intialise the jScrollpane library on c

Solution 1:

$('.nav-tabs li a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $('.tab-content > .tab-pane.active').jScrollPane();
});

Use e.preventDefault(). It prevents the default action (in this case, "navigating" to #)

Solution 2:

Using data-target instead of href seems to work with bootstrap 3 pills and tabs. If the mouse curser doesn't change due to the fact that there is no href attribute, then you could add a bit of css

EDIT: Code added as per request below, note lack of a target on the href and the addition of data-target="#...

<ulclass="nav nav-tabs" ><liclass="active"><ahref="#"data-target="#tab_id_1"data-toggle="tab"> Tab Name 1</a></li><li><ahref="#"data-target="#tab_id_2"data-toggle="tab"> Tab Name 2 </a></li></ul><divclass="tab-content"><divid="tab_id_1"class="tab-pane active">
              CONTENT 1
          </div><divid="tab_id_2"class="tab-pane">
              CONTENT 2
          </div></div>

Solution 3:

I have found a very simple solution. I just add another # in the tabs href:

<ulclass="nav nav-tabs"><liclass="home_tab active"><ahref="##home"></a></li><liclass="about_tab"><ahref="##about"></a></li><liclass="services_tab"><ahref="##services"></a></li>
          ...
</ul>

I don't know if it's the best solution, but for sure is quick and easy. In my case it works on Chrome and IE 10 and for my requirements it's enough.

Solution 4:

Define your tab link like this:

<a data-target="#step1" data-toggle="tab">

and your tab itself like this:

<div class="tab-pane" id="step1">

Solution 5:

The answer from @paulslater19 didn't work for me. But, The following code did:

$('.nav-tabs li a').click( function(e) {
    history.pushState( null, null, $(this).attr('href') );
});

Tested on Bootstrap 3.2.0.

I've got this code from Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked.

UPDATE

The complete function for bootstrap 3.2.0:

$().ready(function () {
        // store the currently selected tab in the hash value
        $("ul.nav-tabs > li > a").click(function (e) {
            $(this).tab('show');
            history.pushState(null, null, $(e.target).attr("href"));
        });

        // on load of the page: switch to the currently selected tab
        $('ul.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });