重新加载页面后保持活动 jQuery UI 标签和与其相关的子标签
Keep active jQuery UI tab and related to it sub-tab after reloading page
我想在重新加载页面后保持活动 jQuery UI 标签和与之相关的子标签。
目前,我只保留标签。
我使用下一个脚本:
$(".tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function (event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option','active'));
}});
您可以在会话存储中使用存储值来做到这一点:
https://codepen.io/creativedev/pen/PaGerK
$(document).ready(function () {
var i = "0";
var j ="0";
$tab = $(".tabs").tabs({
activate : function (e, ui) {
tabid = ui.newPanel.attr('id');
if(tabid.indexOf("sub") != -1){
sessionStorage.setItem('sub-tab-index', ui.newPanel.attr('id'));
}else{
sessionStorage.setItem('tab-index', ui.newPanel.attr('id'));
}
}
});
if (sessionStorage.getItem('tab-index') != null) {
i = sessionStorage.getItem('tab-index');
if(i !=''){
$('.tabs li').each(function(){
var ac = $(this).attr('aria-controls');
if(ac.indexOf("sub") == -1){
$(this).removeClass("ui-tabs-active ui-state-active");
console.log(ac)
console.log($('#'+ ac).css('display', 'none'));
}
});
$("#"+i).css('display','block');
$('.tabs').find("[aria-controls='"+i+"']").find('a').trigger('click');
$('.tabs').find("[aria-controls='"+i+"']").addClass('ui-tabs-active ui-state-active');
//sessionStorage.removeItem('tab-index')
}
}
if (sessionStorage.getItem('sub-tab-index') != null) {
j = sessionStorage.getItem('sub-tab-index');
if(j !=''){
$('.tabs li').each(function(){
var ac1 = $(this).attr('aria-controls');
if(ac1.indexOf("sub") != -1){
$(this).removeClass("ui-tabs-active ui-state-active");
}
});
$('.tabs').find("[aria-controls='"+j+"']").find('a').trigger('click');
$('.tabs').find("[aria-controls='"+j+"']").addClass('ui-tabs-active ui-state-active');
// sessionStorage.removeItem('sub-tab-index');
}
}
});
我想在重新加载页面后保持活动 jQuery UI 标签和与之相关的子标签。 目前,我只保留标签。
我使用下一个脚本:
$(".tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function (event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option','active'));
}});
您可以在会话存储中使用存储值来做到这一点:
https://codepen.io/creativedev/pen/PaGerK
$(document).ready(function () {
var i = "0";
var j ="0";
$tab = $(".tabs").tabs({
activate : function (e, ui) {
tabid = ui.newPanel.attr('id');
if(tabid.indexOf("sub") != -1){
sessionStorage.setItem('sub-tab-index', ui.newPanel.attr('id'));
}else{
sessionStorage.setItem('tab-index', ui.newPanel.attr('id'));
}
}
});
if (sessionStorage.getItem('tab-index') != null) {
i = sessionStorage.getItem('tab-index');
if(i !=''){
$('.tabs li').each(function(){
var ac = $(this).attr('aria-controls');
if(ac.indexOf("sub") == -1){
$(this).removeClass("ui-tabs-active ui-state-active");
console.log(ac)
console.log($('#'+ ac).css('display', 'none'));
}
});
$("#"+i).css('display','block');
$('.tabs').find("[aria-controls='"+i+"']").find('a').trigger('click');
$('.tabs').find("[aria-controls='"+i+"']").addClass('ui-tabs-active ui-state-active');
//sessionStorage.removeItem('tab-index')
}
}
if (sessionStorage.getItem('sub-tab-index') != null) {
j = sessionStorage.getItem('sub-tab-index');
if(j !=''){
$('.tabs li').each(function(){
var ac1 = $(this).attr('aria-controls');
if(ac1.indexOf("sub") != -1){
$(this).removeClass("ui-tabs-active ui-state-active");
}
});
$('.tabs').find("[aria-controls='"+j+"']").find('a').trigger('click');
$('.tabs').find("[aria-controls='"+j+"']").addClass('ui-tabs-active ui-state-active');
// sessionStorage.removeItem('sub-tab-index');
}
}
});