Помните, какая вкладка была активной после обновления

Question

Я использую вкладки jquery на веб-странице, и когда страница обновляется, она теряет все те вкладки, на которых я когда-либо была, и возвращается к первой вкладке.

Кто-нибудь сталкивался с этой проблемой и знает, как ее решить?

Answer 1

У меня недавно была та же проблема, и я долго смотрел документы на Виджет вкладок пользовательского интерфейса JQuery . В итоге я использовал события activate и create для JQuery UI 1.10, а также localStorage для сохранения текущей вкладки до обновления страницы.

$( ".selector" ).tabs({                                                 
    activate: function( event, ui) {
        //when tab is activated store it's index in activeTabIndex
            var activeTabIndex = $('.tabs').tabs('option','active');
        //add activeTabIndex to localStorage and set with key of 'currentTab'  
            localStorage.setItem('currentTab', activeTabIndex); 
                        },
        create: function( event, ui ) {
            $(".tabs").tabs({       
        //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
        //after getItem from localStorage
        active: localStorage.getItem('currentTab')
    });
    }

});

Answer 2

Я решил ту же проблему с помощью следующих блогов .

HTML Tab

 <ul class="tabs clear-fix">
     <li class=""><a href="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>JAVA</a><span></span></li>
     <li class=""><a href="#tab=js"  id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>JAVA SCRIPT</a><span></span></li>
     <li><a href="#tab=c"  id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li>
     <li><a href="#tab=c2"  id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li>
     <li><a href="#tab=jQ"  id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li>
    </ul>

Javascript

 var selectedTab =  window.location.href.split("#tab=")[1] ;
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('id');

    if (typeof selectedId === "undefined") {
         $('#tab1-tab').trigger("click");
    }
    else{
        $('#'+selectedId).trigger("click");
    }

Для меня это сработало, предложение приветствуется.

Answer 3

   $(function () {

        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        //$(function () {
            $("#tabs").tabs({
                    select: function (event, ui) {                       
                    document.location.href = ui.tab.href;                        
                }
            }).show();

        //});

                    $("#MainContent_button1").click(function (event) {                           
                        event .preventDefault();
                         $("#dialog").dialog("open");                           
                    });
    });

Я использовал его в ASP.NET, и он прекрасно работает для меня. У меня также есть кнопка во второй вкладке, чтобы показать какое-то диалоговое окно, и оно прекрасно работает.

Пуджа Дингра

Answer 4

Как вы думаете, вы можете добавить ту же функцию в код ниже:

$(".menu > li").click(function(e){
    $(".content." + $(".menu > .active").attr("id")).fadeOut("fast", function() {
        $(".content." + e.target.id).fadeIn();
        $(".menu > #" + e.target.id).addClass("active");
    });

    $(".menu > .active").removeClass("active");

    return true;

});

Answer 5

Моя компания блокирует куки, поэтому я нашел обходной путь. Просто следите за вкладкой, используя скрытое поле, и передайте это значение обратно после завершения запроса. Это не красиво, но это делает работу.

<% if(request.getAttribute("tab")==null) { %>
    $("#tabs").tabs();
<% } else { %>
    $("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>});
<% } %>

В конце я просто установил атрибут

request.setAttribute("tab", f.get("tab").toString());

Надеюсь, это поможет.

Answer 6

Вы можете использовать плагин jQuery History , вот демоверсия (загрузить другую ссылку в демо и попробовать обновить)