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

Posted 2023-05-08

【中文标题】重新加载页面后保持活动的 jQuery UI 选项卡和与其相关的子选项卡

【英文标题】：Keep active jQuery UI tab and related to it sub-tab after reloading page

【发布时间】：2018-11-17 09:11:19

【问题描述】：

我想在。 目前，我只保留标签。

我使用下一个脚本：

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

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

【参考方案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');
         
    
);

【讨论】：

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