我在网页上使用jQuery选项卡,但希望它记住上次使用的选项卡,在表单sumbit之后,或者当用户单击链接,然后返回选项卡页面时。我怎么记得刷新页面或导航到另一个链接后使用的最后一个选项卡。到目前为止,我在网上找不到任何例子,我有这样的代码:
<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/
CONCEPT:将数据存储在cookie中,并在页面加载时检索。
document.cookie = "tab=foo";
完整实施示例:
http://jsfiddle.net/sst9x2pd/
HTML:
<ul class="nav nav-tabs">
<li><a class="addressClick" href="#aaa" data-toggle="tab">AAA</a></li>
<li><a class="addressClick" href="#bbb" data-toggle="tab">BBB</a></li>
<li><a class="addressClick" href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
JS:
$('.nav-tabs a[href="'+getCookie('lastTab')+'"]').tab('show');
$(".addressClick").click(function () {
var addressValue = $(this).attr("href");
console.log(addressValue);
setCookie('lastTab', addressValue, 100);
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}