JavaScript-Twitter Bootstrap的tab组件如何支持前进后退按钮?

JavaScript-Twitter Bootstrap的tab组件如何支持前进后退按钮?

灵芸 发布于 2017-10-22 字数 161 浏览 1285 回复 1

Twitter Bootstrap的tab中,如何选中一个tab,切换到另外一个tab之后,点击后退按钮还可以回到之前的tab呢?
另外,最好能够体现在URL中,这样可以保存书签了。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浮生未歇 2017-10-25 1 楼

1. 下载并包含 Ben Alman's hashchange plugin:
http://benalman.com/projects/jquery-hashchange-plugin/

2. 程序中添加如下代码:

$(function(){
// Function to activate the tab
function activateTab() {
var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
activeTab && activeTab.tab('show');
}

// Trigger when the page loads
activateTab();

// Trigger when the hash changes (forward / back)
$(window).hashchange(function(e) {
activateTab();
});

// Change hash when a tab changes
$('a[data-toggle="tab"], a[data-toggle="pill"]').on('shown', function () {
window.location.hash = '/' + $(this).attr('href').replace('#', '');
});
});

参考:https://github.com/twitter/bootstrap/pull/581