twitter-bootstrap 页面重新加载后，使用 twitter bootstrap 保持当前选项卡处于活动状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16808205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
keep the current tab active with twitter bootstrap after a page reload?
提问by Grand Masta D
I know this question was asked before and answered in the following post:
我知道之前有人问过这个问题，并在以下帖子中得到了回答：
How do I keep the current tab active with twitter bootstrap after a page reload?
页面重新加载后，如何使用 twitter bootstrap 保持当前选项卡处于活动状态？
However, given my limited knowledge of scripting, I have not been able to get this to work on my website. After putting the code in my html page the tabs still go to the first and active one on page reload.
然而，鉴于我对脚本的了解有限，我无法在我的网站上使用它。将代码放入我的 html 页面后，选项卡仍会转到页面重新加载时的第一个和活动的选项卡。
Please can someone share a working example of the solution presented in the link above.
请有人可以分享上面链接中提供的解决方案的工作示例。
My code looks like this:
我的代码如下所示：
<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>
Highly appreciated,
高度赞赏，
回答by Bass Jobsen
As Tommi Komulainenwrote: e.target contains the full url including the hash. You only need the hash. So use e.target.toString().split('#')[1]); or even better $(this).attr('href')$('#'+lastTab).tab('show');applies the .tab()on the div with id = #{lastTab}while you need to apply on the link (a tag) with data-toggle. So use: $('a[href=#' + lastTab + ']').tab('show');here.
正如Tommi Komulainen所写：e.target 包含完整的 url，包括哈希。你只需要哈希。所以使用e.target.toString().split('#')[1]); 或者甚至更好地$(this).attr('href')$('#'+lastTab).tab('show');将.tab()id应用到div 上，#{lastTab}而您需要将data-toggle. 所以使用：$('a[href=#' + lastTab + ']').tab('show');这里。
The complete function to use:
要使用的完整功能：
$(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');
}
});
update:
see https://stackoverflow.com/a/16016592/1596547so remove the active class from your source and set the first tab active when lastTabis not set.
更新：请参阅https://stackoverflow.com/a/16016592/1596547，因此从源中删除活动类，并在lastTab未设置时将第一个选项卡设置为活动状态。
回答by ndemoreau
I prefer to use a pushstate.
我更喜欢使用pushstate。
It seems more like "The web way..." to me and it allows me to have external links pointing right to the tab I want to show.
对我来说，这似乎更像是“网络方式...”，它允许我将外部链接指向我想要显示的选项卡。
This is my function:
这是我的功能：
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');
}
};
