我知道此问题之前已被问过，并在以下帖子中回答：
How do I keep the current tab active with twitter bootstrap after a page reload?
但是，由于我对脚本的了解有限，我无法在我的网站上使用它。将代码放入我的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>
非常感谢，
答案 0 :(得分：17)
正如Tommi Komulainen所写：e.target包含包含哈希的完整网址。你只需要哈希。所以使用e.target.toString().split('#')[1]);甚至更好$(this).attr('href')
$('#'+lastTab).tab('show');会在ID为.tab()的div上应用#{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');
}
});
。
使用的完整功能：
lastTab<强>更新： 请参阅https://stackoverflow.com/a/16016592/1596547，以便从源中删除活动类，并在未设置{{1}}时将第一个标签设置为活动状态。
答案 1 :(得分：2)
我更喜欢使用pushstate。
似乎更像是＃34;网络方式......＆＃34;对我而言，它允许我将外部链接指向我想要显示的选项卡。
这是我的功能：
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');
}
};