页面重新加载后，如何使用 twitter bootstrap 保持当前选项卡处于活动状态?
问题描述：
我目前在 Twitter Bootstrap 中使用标签，并希望在用户发布数据并重新加载页面后选择相同的标签.
I'm currently using tabs with Twitter Bootstrap and want to select the same tab after a user has posted data and the page reloads.
这是怎么做到的?
我当前对选项卡的调用如下所示:
My current call to inti the tabs looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('#profileTabs a:first').tab('show');
});
</script>
我的标签:
<ul id="profileTabs" class="nav nav-tabs">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#about" data-toggle="tab">About Me</a></li>
<li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>
答
您必须使用 localStorage 或 cookie 来管理它.这是一个可以大大改进的快速而肮脏的解决方案，但可以为您提供一个起点:
You'll have to use localStorage or cookies to manage that. Here's a quick and dirty solution that can be vastly improved, but may give you a starting point:
$(function() {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});