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 a jsfiddle example here.

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