如何记住提交/刷新后使用的最后一个标签? [英] How to remember last tab used after submit/refresh?
本文介绍了如何记住提交/刷新后使用的最后一个标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在网页上使用jQuery选项卡,但希望它记住上一次使用的选项卡,表单汇总后或用户单击链接然后返回到选项卡页面时.我如何记住刷新页面或导航到另一个链接后使用的最后一个选项卡.到目前为止,我在网络上找不到任何示例,到目前为止,我已经有了以下代码:
I am using jQuery tab on my webpage but want it to remember the last tab used, after a form sumbit or when the user click on a link and then comming back to the tab page. How can i remember the last tab used after refresh of page, or navigating to another link. None of the examples i have found around the net work so far, I have this code so far:
<div id="content-container">
<div id="page-content">
<div class="row">
<div class="col-md-12">
<div class="tab-base">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#demo-lft-tab-1">Tab1</a>
</li>
<li>
<a data-toggle="tab" href="#demo-lft-tab-2">Tab2</a>
</li>
<li>
<a data-toggle="tab" href="#demo-lft-tab-3">Tab3</a>
</li>
<li>
<a data-toggle="tab" href="#demo-lft-tab-4">Tab4</a>
</li>
</ul>
<div class="tab-content">
<div id="demo-lft-tab-1" class="tab-pane fade active in"></div>
<div id="demo-lft-tab-2" class="tab-pane fade"></div>
<div id="demo-lft-tab-3" class="tab-pane fade"></div>
<div id="demo-lft-tab-4" class="tab-pane fade"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var lastTab = localStorage.getItem('lastTab');
if (!lastTab) {
lastTab = 0;
}
$(".tab-base").tabs({
activate: function(event, ui) {
//if another tab is activate, save it's index to the localStorage
localStorage.setItem('lastTab', ui.newTab.index());
},
//set the corresponding tab to active
active: lastTab
});
</script>
推荐答案
尝试一下
$(function() {
$( ".tab-base" ).tabs({
activate:function(event,ui){
localStorage.setItem("lastTab",ui.newTab.index() );
},
active: localStorage.getItem("lastTab") || 0
});
});
您可以通过选择选项卡在此处进行检查并刷新页面. https://jsbin.com/
you can check here by select the tab and refresh the page. https://jsbin.com/
这篇关于如何记住提交/刷新后使用的最后一个标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文