我知道这个问题之前被问过并在以下帖子中得到回答：
页面重新加载后如何使用 twitter bootstrap 保持当前选项卡处于活动状态？
但是，由于我对脚本的了解有限，我无法让它在我的网站上运行。将代码放入我的 html 页面后，选项卡仍然会在页面重新加载时转到第一个且活动的选项卡。
请有人分享上面链接中提供的解决方案的工作示例。
我的代码如下所示：
<div class="tabbable" style="margin-bottom: 8px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">My Career Centre</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Hiring Companies</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Training Providers</a></li>
<li class=""><a href="#tab4" data-toggle="tab">Advertise</a></li>
<li class=""><a href="#tab5" data-toggle="tab">Graduate Opportunities</a></li>
<li class=""><a href="#tab6" data-toggle="tab">Career Forum</a></li>
</ul>
<script type="text/javascript">
$(function()
{
$('a[data-toggle="tab"]').on('shown', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('id'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('#'+lastTab).tab('show');
}
});
</script>
<div class="tab-content" style="padding: 0 5px;">
<div class="tab-pane active" id="tab1">
<div class="navbar" style="width:930px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Job Search</a></li>
<li><a href="#">Training Programmes</a></li>
<li><a href="#">Job Alerts</a></li>
<li><a href="#">My Job Applications</a></li>
<li><a href="#">My Studies</a></li>
<li><a href="http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received">Received Messages</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="navbar" style="width:900px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Manage Your Job Adverts</a></li>
<li><a href="#">Browse CV's</a></li>
<li><a href="#">Manage Job Applications</a></li>
<li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my">View Reports For Your Adverts</a></li>
<li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts">Manage Sub-Accounts</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="navbar" style="width:900px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Browse Training Programmes</a></li>
<li><a href="#">Browse Featured Training Providers</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<div class="navbar" style="width:900px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Jobs</a></li>
<li><a href="#">Training Programmes</a></li>
<li><a href="#">Your Company</a></li>
<li><a href="#">Your Recruitment Agency</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab5">
<div class="navbar" style="width:900px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Search Current Opportunities</a></li>
<li><a href="#">News and Updates</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab6">
<div class="navbar" style="width:900px;">
<div class="navbar-inner">
<div class="container">
<ul class="nav2" style="padding-top:0px;">
<li><a href="#">Career Advice</a></li>
<li><a href="#">CV/Resume</a></li>
<li><a href="#">Interview Preparation</a></li>
<li><a href="#">Career Net-Work</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
高度赞赏，
正如 Tommi Komulainen 所写：e.target 包含完整的 url，包括哈希值。你只需要哈希值。所以使用
e.target.toString().split('#')[1])$(this).attr('href')$('#'+lastTab).tab('show');.tab()#{lastTab}data-toggle$('a[href=#' + lastTab + ']').tab('show');完整的使用功能：
$(function()
{
$('a[data-toggle="tab"]').on('shown', function () {
//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) {
$('a[href=' + lastTab + ']').tab('show');
}
else
{
// Set the first tab if cookie do not exist
$('a[data-toggle="tab"]:first').tab('show');
}
});
更新： 请参阅 https://stackoverflow.com/a/16016592/1596547，因此从源中删除活动类，并在未设置
lastTab我更喜欢使用推送状态。
对我来说，它看起来更像是“网络方式......”，它允许我将外部链接指向我想要显示的选项卡。
这是我的职责：
function setBootstrapTabs()
{
var activeTab = "#" + getParameterByName("submenu");
$('a[data-toggle="tab"]').on('shown', function () {
//save the latest tab;
var new_url = updateUrlParam("submenu",
$(this).attr('href').replace("#",""));
window.history.replaceState({
turbolinks: true, position: Date.now()
}, document.title, new_url
);
});
if (activeTab.length > 0) {
$('a[href=' + activeTab + ']').tab('show');
}
};
Bootstrap 2024 更新
5.3let activeTab;
$('#myTabWrapper a[data-bs-toggle=tab]').on('show.bs.tab', function(e) {
activeTab = $(e.target).attr('data-bs-target');
localStorage.setItem('myTabWrapperActiveTab', activeTab);
});
if (activeTab = localStorage.getItem('myTabWrapperActiveTab')){
let bsTab, tabEl = $('#myTabWrapper a[data-bs-target="' + activeTab + '"]').get(0);
if (bsTab = bootstrap.Tab.getOrCreateInstance(tabEl)) {
bsTab.show();
}
}
如果不使用 jQuery，则使用 valilla JS
let activeTab;
document.querySelector('#myTabWrapper a[data-bs-toggle=tab]').addEventListener('shown.bs.tab', function(e) {
activeTab = e.target.getAttribute('data-bs-target');
localStorage.setItem('myTabWrapperActiveTab', activeTab);
});
if (activeTab = localStorage.getItem('myTabWrapperActiveTab')){
let bsTab, tabEl = document.querySelector('#myTabWrapper a[data-bs-target="' + activeTab + '"]');
if (bsTab = bootstrap.Tab.getOrCreateInstance(tabEl)) {
bsTab.show();
}
}