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

需求定制 需求定制 主题:1050 回复:2283

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

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

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

发布评论

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

支持 Markdown 语法,需要帮助?

评论(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