Bootstrap TabPanel选项卡 - 禁用页面滚动到元素的ID

Question

我的TabPanel标签的标题包含两件事:

1. 复选框
2. 标签的标题

要显示标签,我使用jQuery代码:

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

使用这种代码,每次单击选项卡时,页面都会滚动到每个div.如果我在行e.preventDefault();之前添加jQuery代码行$(this).tab('show');来禁用滚动,那么第二个问题就出现了 - 复选框不再检查/取消选中.

任何想法,如何摆脱这两个问题？

滚动问题示例:http: //jsfiddle.net/K9LpL/717/

复选框检查/取消选中问题的示例:http: //jsfiddle.net/K9LpL/718/

Answer 1

你可以用 <a data-target="#home"> 而不是<a href="#home">

请看这里的例子:http://jsfiddle.net/RPSmedia/K9LpL/1154/

Answer 2

我通过添加e.stopImmediatePropagation()修复了这个问题.到事件处理程序:

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

编辑:根据评论修复类选择器.

Answer 3

编辑 - 下面罗曼的回答是比这个更好的解决方案。

使用preventDefault()您可以添加代码来手动切换复选框。

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

更新的小提琴

编辑：

我决定以另一种方式解决这个问题。不要使用preventDefault()，而是修复滚动问题。我能够以$(window).scrollTop(0)非常非常小的延迟/超时来做到这一点。

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

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

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

演示