Question

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

复选框
标签的标题

要显示标签，我使用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);

Updated Fiddle

编辑：

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

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

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

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

Demo

Answer 4

我的方法（在nav-pills上使用过，但是您可以轻松地将pill替换为tab，对@ Tricky12的答案进行了一些修改，因为我不喜欢使用setTimeout褪色的制表符开关：

$(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;
    });
});

注意：在Bootstrap 4.3上编码，但我想它也可以在较早版本上使用。

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

4 个答案: