我目前正在使用带有 Twitter Bootstrap 的选项卡，并希望在用户发布数据并重新加载页面后选择相同的选项卡。
这是怎么做的？
我当前对选项卡的调用如下所示：
<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 来管理它。这是一个可以大大改进的快速而肮脏的解决方案，但可能会给您一个起点：
$(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');
}
});
使用 cookie 使其工作，并从任何其他选项卡和选项卡窗格中删除“活动”类......并将“活动”类添加到当前选项卡和选项卡窗格。
我确信有更好的方法来做到这一点，但这在这种情况下似乎有效。
需要 jQuery cookie 插件。
$(function() {
$('a[data-toggle="tab"]').on('shown', function(e){
//save the latest tab using a cookie:
$.cookie('last_tab', $(e.target).attr('href'));
});
//activate latest tab, if it exists:
var lastTab = $.cookie('last_tab');
if (lastTab) {
$('ul.nav-tabs').children().removeClass('active');
$('a[href='+ lastTab +']').parents('li:first').addClass('active');
$('div.tab-content').children().removeClass('active');
$(lastTab).addClass('active');
}
});
所有其他答案都是正确的。此答案将考虑一个事实，即一个人可能有多个ul.nav.nav-pills或ul.nav.nav-tabs在同一页面上。在这种情况下，先前的答案将失败。
仍在使用localStorage但以字符串化JSON作为值。这是代码：
$(function() {
var json, tabsState;
$('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
var href, json, parentId, tabsState;
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
href = $(e.target).attr('href');
json[parentId] = href;
return localStorage.setItem("tabs-state", JSON.stringify(json));
});
tabsState = localStorage.getItem("tabs-state");
json = JSON.parse(tabsState || "{}");
$.each(json, function(containerId, href) {
return $("#" + containerId + " a[href=" + href + "]").tab('show');
});
$("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
var $this = $(this);
if (!json[$this.attr("id")]) {
return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
}
});
});
此位可用于所有页面的整个应用程序，并且适用于选项卡和药丸。此外，请确保默认情况下选项卡或药丸未处于活动状态，否则您将在页面加载时看到闪烁效果。
重要提示：确保父级ul有一个 id。谢谢阿兰
对于最佳选择，请使用以下技术：
$(function() {
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('click', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('a[href="'+lastTab+'"]').click();
}
});
我更喜欢将选定的选项卡存储在窗口的哈希值中。这也允许向看到“相同”页面的同事发送链接。诀窍是在选择另一个选项卡时更改位置的哈希值。如果您已经在页面中使用了 #，则可能需要拆分哈希标签。在我的应用程序中，我使用“:”作为哈希值分隔符。
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>