- 首页
- 其他开发
- Bootstrap 3:在页面刷新时保持选定的选项卡
Bootstrap 3:在页面刷新时保持选定的选项卡
[英] Bootstrap 3: Keep selected tab on page refresh
本文介绍了Bootstrap 3:在页面刷新时保持选定的选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Bootstrap 3 在刷新时保持所选标签处于活动状态.尝试并检查了一些已经在这里问过的问题，但对我来说没有用.不知道我错在哪里.这是我的代码
HTML
<ul class="nav nav-tabs" id="rowTab"><li class="active"><a href="#personal-info" data-toggle="tab">个人信息</a></li><li><a href="#Employment-info" data-toggle="tab">就业信息</a></li><li><a href="#career-path" data-toggle="tab">职业道路</a></li><li><a href="#warnings" data-toggle="tab">警告</a></li><!-- 结束:标签链接--><div class="tab-content"><div class="tab-pane active" id="personal-info">标签数据在这里...
<div class="tab-pane" id="Employment-info">标签数据在这里...
<div class="tab-pane" id="职业路径">标签数据在这里...
<div class="tab-pane" id="warnings">标签数据在这里...
Javascript:
//标签$('#rowTab a:first').tab('show');//对于引导程序 3，在下一行中使用shown.bs.tab"而不是shown"$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {//保存最新的标签；如果您更喜欢它们，请使用 cookie:localStorage.setItem('selectedTab', $(e.target).attr('id'));});//转到最新的选项卡，如果它存在:var selectedTab = localStorage.getItem('selectedTab');如果(选择标签){$('#'+selectedTab).tab('show');}
解决方案
我更喜欢将选定的选项卡存储在窗口的哈希值中.这也允许向看到相同"页面的同事发送链接.诀窍是在选择另一个选项卡时更改位置的哈希值.如果您已经在页面中使用了 #，则可能需要拆分哈希标签.在我的应用中，我使用:"作为哈希值分隔符.
<li class="active"><a href="#home">首页</a></li><li><a href="#profile">个人资料</a></li><li><a href="#messages">消息</a></li><li><a href="#settings">设置</a></li>
<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>
JavaScript，必须嵌入在 <script>...</script> 部分之后.
$('#myTab a').click(function(e) {e.preventDefault();$(this).tab('show');});//将当前选中的选项卡存储在哈希值中$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {var id = $(e.target).attr("href").substr(1);window.location.hash = id;});//在页面加载时:切换到当前选择的选项卡var hash = window.location.hash;$('#myTab a[href="' + hash + '"]').tab('show');
I am trying to keep selected tab active on refresh with Bootstrap 3. Tried and checked with some question already been asked here but none of work for me. Don't know where I am wrong. Here is my code
HTML
<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
<li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
<li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
<li><a href="#career-path" data-toggle="tab">Career Path</a></li>
<li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->
<div class="tab-content">
<div class="tab-pane active" id="personal-info">
tab data here...
</div>
<div class="tab-pane" id="Employment-info">
tab data here...
</div>
<div class="tab-pane" id="career-path">
tab data here...
</div>
<div class="tab-pane" id="warnings">
tab data here...
</div>
</div>
Javascript:
// tab
$('#rowTab a:first').tab('show');
//for bootstrap 3 use 'shown.bs.tab' instead of '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('selectedTab', $(e.target).attr('id'));
});
//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
$('#'+selectedTab).tab('show');
}
解决方案
I prefer storing the selected tab in the hashvalue of the window. This also enables sending links to colleagues, who than see "the same" page. The trick is to change the hash of the location when another tab is selected. If you already use # in your page, possibly the hash tag has to be split. In my app, I use ":" as hash value separator.
<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>
JavaScript, has to be embedded after the above in a <script>...</script> part.
$('#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');
这篇关于Bootstrap 3:在页面刷新时保持选定的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
