修改

Question

我在页面上有几个标签，我正在尝试在重新加载页面时保持标签处于活动状态。我通过push hash into url来执行此操作：

$('.nav-tabs a[data-toggle="tab"]').click(function () {
    window.history.pushState("", "", $(this).attr('href'));
});

使用上面的代码，即使用户重新加载页面，我也会保持标签处于活动状态。

我正在尝试捕获shown.bs.tab事件，但显然事件不会在页面重新加载时触发，但在单击任何其他选项卡时都可以使用

$('.nav-tabs a[data-toggle="tab"]').on('shown.bs.tab', function () {
    //do something
});

知道我做错了吗？

修改

active类已从li和div.tab-pane

中移除

我甚至尝试手动调用tab.show事件，但它没有帮助

var hash = window.location.hash;
if(hash) {
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); //or trigger('click')
}

Answer 1

确保在调用shown.bs.tab之前附加.tab('show')处理程序：

// wire up shown event $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { console.log("tab shown..."); }); // read hash from page load and change tab var hash = document.location.hash; var prefix = "tab_"; if (hash) { $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show'); }

Bootstrap 4 - 在重新加载时选择活动标签

代码：http://www.codeply.com/go/Yu8wbjeGMZ
演示：http://www.codeply.com/render/Yu8wbjeGMZ#tab2

Answer 2

似乎use DBI; my $dbh = DBI->connect("dbi:DB2:$databaseName", $userName, $password);不会在已显示的标签上触发事件。

相反，我已将其替换为.tab('show');并且它正常工作，所以我的代码现在看起来像这样：

.trigger('shown.bs.tab');

在页面加载时未触发bootstrap选项卡shows.bs.tab

修改

2 个答案: