重新加载页面后保持活动的 jQuery UI 选项卡和与其相关的子选项卡答案

【问题标题】：Keep active jQuery UI tab and related to it sub-tab after reloading page重新加载页面后保持活动的 jQuery UI 选项卡和与其相关的子选项卡
【发布时间】：2018-11-17 09:11:19
【问题描述】：

我想在重新加载页面后保持活动的 jQuery UI 选项卡和与其相关的子选项卡。目前，我只保留标签。

我使用下一个脚本：

$(".tabs").tabs({
    active: localStorage.getItem("currentIdx"),
    activate: function (event, ui) {
    localStorage.setItem("currentIdx", $(this).tabs('option','active'));
               }});

https://codepen.io/evgenydym/pen/YvGRER

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

您可以使用在会话存储中存储值来做到这一点：

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');
         }
    }
});

【讨论】：

感谢您的快速回复。您的示例与选项卡相关，但我很想知道如何为子选项卡实现相同的功能。