我知道之前曾问过这个问题并在以下帖子中回答：
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>
非常感谢,
解决方法
正如
Tommi Komulainen所写：e.target包含包含哈希的完整URL.你只需要哈希.所以使用e.target.toString().split(‘#’)[1]);甚至更好$(this).attr(‘href’)
$(‘#’lastTab).tab(‘show’);在id =#{lastTab}的div上应用.tab(),同时需要在带有数据切换的链接(标记)上应用.所以使用：$(‘a [href =#’lastTab’]’).tab(‘show’);这里.
$(‘#’lastTab).tab(‘show’);在id =#{lastTab}的div上应用.tab(),同时需要在带有数据切换的链接(标记)上应用.所以使用：$(‘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时将第一个选项卡设置为活动状态.