Bootstrap TabPanel Tab - Disable Page Scrolling To Element's ID

Question

My TabPanel Tab's title consists of two things:

1. checkbox
2. title of the tab

To show tabs, I use jQuery code:

$('#myTab a').click(function (e) {
  $(this).tab('show');
});

With this kind of a code the page scrolls to each div every time I click on a tab. If I add jQuery code line e.preventDefault(); before $(this).tab('show'); line which disables the scrolling, then comes the second problem - checkboxes doesn't check/uncheck any more.

Any ideas, how to escape from both problems?

Example with scrolling problem: http://jsfiddle.net/K9LpL/717/

Example with checkbox checking/unchecking problem: http://jsfiddle.net/K9LpL/718/

Answer 1

You can use <a data-target="#home"> instead of <a href="#home">

See here for an example: http://jsfiddle.net/RPSmedia/K9LpL/1154/

Answer 2

I fixed this by adding e.stopImmediatePropagation(); to the event handler:

$('.nav-tabs li a').click(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
  $(this).tab('show');
});

edit: fixed class selector as per comment.

Answer 3

EDIT - Roman's answer below is a better solution than this one.

Using preventDefault() you can add code to manually toggle the checkboxes.

var checked = $(this).find('input').prop('checked');
$(this).find('input').prop('checked', !checked);

Updated Fiddle

Edit:

I decided to approach this the other way. Do not use preventDefault() and instead, fix the scrolling issue. I was able to do this with $(window).scrollTop(0) and a very, very small delay/timeout.

$('#myTab a').click(function (e) {
    var scrollHeight = $(document).scrollTop();

    $(this).tab('show');

    setTimeout(function() {
        $(window).scrollTop(scrollHeight );
    }, 5);
});

Demo

Answer 4

My method (used on nav-pills but you can replace pill to tab easily, modified @Tricky12's answer a little because I didn't like setTimeout when using a faded tab switch:

$(document).ready(function(){
    // buffer the last scroll position
    var lastScrollPosition = $(window).scrollTop();

    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
        location.replace($(e.target).attr("href"));
        // revert back to last scroll position
        $(window).scrollTop(lastScrollPosition);
    });

    // switch to the currently selected tab when loading the page
    $('.nav-pills a[href="' + window.location.hash + '"]').tab("show");

    $('a[data-toggle="pill"]').on("click", function(e){
        // buffer the scroll position again
        lastScrollPosition = $(window).scrollTop();
        // show the tab
        $(this).tab('show');
        // prevent default actions
        return false;
    });
});

Note : coded on Bootstrap 4.3 but I suppose it'll work on older versions too.