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="#...

      <ul class="nav nav-tabs" >
     <li class="active"><a href="#" data-target="#tab_id_1" data-toggle="tab"> Tab Name 1</a></li>
     <li><a href="#" data-target="#tab_id_2" data-toggle="tab"> Tab Name 2 </a></li>
    </ul>
     <div class="tab-content"> 
         <div id="tab_id_1" class="tab-pane active">
              CONTENT 1
          </div>
          <div id="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:

<ul class="nav nav-tabs">
          <li class="home_tab active"><a href="##home"></a></li>
          <li class="about_tab"><a href="##about"></a></li>
          <li class="services_tab"><a href="##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');
    });