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

jquery jquery-plugins

85333 просмотра

16 ответа

3378 Репутация автора

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

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

Автор: thegunner Источник Размещён: 28.11.2010 10:15

Ответы (16)


0 плюса

66129 Репутация автора

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

Автор: Josh Stodola Размещён: 28.11.2010 10:18

2 плюса

18617 Репутация автора

Когда веб-страницы обновляются, они перезагружают свое состояние с сервера, снова запрашивая страницу.

Либо веб-серверу необходимо запоминать состояние и предоставлять файл иначе, чем по умолчанию, либо вы можете использовать файлы cookie или хэш-компонент URL-адреса и некоторый jQuery для хранения состояния, чтения его при загрузке и восстановления.

См. Плагин jquery.cookie или SWFaddress , узнайте о манипулировании хэш-значениями самостоятельно или плагином jQuery History.

Хеш-метод особенно привлекателен, поскольку он копирует изменения URL, поэтому копирование / вставка URL все еще работает, как и закладки.

Автор: Orbling Размещён: 28.11.2010 10:18

21 плюса

4636 Репутация автора

Решение

Я предполагаю, что вы используете вкладки JQuery UI,

Вот пример использования вкладок + куки для сохранения последней нажатой вкладки

http://jqueryui.com/demos/tabs/#cookie

демо: откройте эту ссылку http://jqueryui.com/demos/tabs/cookie.html

закрыть его и снова открыть его, и вы увидите ту же вкладку нажал

обновление: после 3 лет ответа jquery ui устарел: «cookie»: http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option .

но вы все еще можете добавить, посмотрите здесь, если это соответствует вашим потребностям или нет https://stackoverflow.com/a/14313315/109217

Автор: tawfekov Размещён: 28.11.2010 10:19

0 плюса

994 Репутация автора

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

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

На заднем конце я просто установить атрибут

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

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

Автор: bmoran Размещён: 15.12.2011 09:11

11 плюса

300 Репутация автора

Более простая альтернатива, которую я только что реализовал:

$(".tabs").tabs({
    select: function(event, ui) {                   
       window.location.replace(ui.tab.hash);
    },
});

Это добавит значение хеша к URL, так что обновление страницы перезагрузит эту вкладку, и location.replaceвместо location.hashэтого мы не заполняем историю пользователя нежелательными шагами назад.

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

Автор: Hatcham Размещён: 28.03.2012 03:37

0 плюса

101 Репутация автора

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

$(".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;

});
Автор: Sahbas Has Размещён: 01.05.2012 11:41

1 плюс

1147 Репутация автора

Включите плагин jquery cookies:

<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script>

объявить имя файла cookie внутри $ .function ({.. или document.ready as

var cookieName = "mycookie";

$("#tabs").tabs({
    selected : ($.cookies.get(cookieName) || 0),
    select : function(e, ui) {
        $.cookies.set(cookieName, ui.index);
    }
        });
Автор: Poppy Размещён: 30.07.2012 01:47

1 плюс

6999 Репутация автора

Вы можете попробовать что-то вроде этого, это довольно легко сделать.

# Set selected_tab to the correct index based on the current url anchor hash
selected_tab = 0
if matches = /#(\w+)/.exec(window.location.hash)
  # find the index of the tab with the given id
  selected_tab = $('#' + matches[1]).index() - 1

# Initialize the tabs and set 'selected' to equal the selected_tab variable we just set
$('.tabable').tabs
  selected: selected_tab,  # this is where the magic happens
  select: (evt, ui) ->
    window.location.hash = ui.panel.id  # set an anchor tag in the url with the tab id
Автор: Ryan Размещён: 08.09.2012 12:39

5 плюса

2563 Репутация автора

Теперь, когда cookie отсутствует в jQuery UI 1.10.0, я смешал подход Гаятири с новыми опциями и событиями:

// using cookie plugin from https://github.com/carhartl/jquery-cookie

var tabCookieName = "ui-tabs-1";
$(".tabs").tabs({
    active : ($.cookie(tabCookieName) || 0);
    activate : function( event, ui ) {
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        // my setup requires the custom path, yours may not
        $.cookie(tabCookieName, newIndex, { path: window.location.pathname });
    }
});
Автор: Harry Размещён: 21.01.2013 09:02

38 плюса

381 Репутация автора

Как и другие, я боролся со своей историей файлов cookie пользовательского интерфейса в jQueryUI 1.10. Благодаря решению Гарри и некоторой другой онлайн-документации, на которую я ссылаюсь в приведенном ниже коде, теперь у меня есть работающее решение без использования файлов cookie! Я смог протестировать в Firefox 18.0.1 и IE 9.0.12. Согласно моим ресурсам, Chrome, Firefox, Safari и IE8 и выше поддерживают Session Storage.

  $(function() {
    //  jQueryUI 1.10 and HTML5 ready
    //      http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    //  Documentation
    //      http://api.jqueryui.com/tabs/#option-active
    //      http://api.jqueryui.com/tabs/#event-activate
    //      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/
    //
    //  Define friendly index name
    var index = 'key';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    //  Start magic!
    try {
        // getter: Fetch previous value
        var oldIndex = dataStore.getItem(index);
    } catch(e) {
        // getter: Always default to first tab in error state
        var oldIndex = 0;
    }
    $('#tabs').tabs({
        // The zero-based index of the panel that is active (open)
        active : oldIndex,
        // Triggered after a tab has been activated
        activate : function( event, ui ){
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            dataStore.setItem( index, newIndex ) 
        }
    }); 
    }); 
Автор: Arik Размещён: 22.01.2013 08:47

0 плюса

1 Репутация автора

   $(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и он прекрасно работает для меня. У меня также есть кнопка во второй вкладке, чтобы показать некоторое диалоговое окно, и она отлично работает.

Пуджа Дингра

Автор: Pooja Dhingra Размещён: 11.02.2013 10:58

1 плюс

3453 Репутация автора

Другой вариант - использовать хранилище html 5. Смотрите здесь для примера: http://www.w3schools.com/html/html5_webstorage.asp

Автор: Maurizio In denmark Размещён: 02.07.2013 07:29

1 плюс

417 Репутация автора

Вот альтернативный способ, позволяющий запоминать открытую вкладку по идентификатору элемента (не по индексу). Это полезно, если вы используете этот код для синхронизации открытых вкладок на двух разных страницах с похожими элементами (такими как страница показа и редактирования).

var tabsid = "#tabs";
var cookieid = "tabs_selected2";

var activetabnr = 0;
if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) {
   activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index();
}

$(tabsid).tabs({
   active: $(tabsid).tabs({ active: activetabnr }),
   beforeActivate: function (event, ui) {
        $.cookie(cookieid, "#"+ui.newPanel.attr('id'));
   }
});

Работает с JQuery UI 1.10. Не забудьте включить плагин jquery.cookie !

<script type="text/javascript" src="/js/jquery.cookie.js"></script>
Автор: Jeff Размещён: 02.09.2013 03:05

4 плюса

55628 Репутация автора

Короткий, независимый от макета способ сделать это с помощью localStorage :

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

Специфичный для макета способ сделать это с помощью пользовательских атрибутов данных (возможно, полезно, если значения атрибутов должны были быть использованы каким-либо другим образом в вашем скрипте).

Пользовательский интерфейс jQuery:

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

Пример макета HTML:

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>
Автор: dsgriffin Размещён: 03.03.2015 12:16

0 плюса

360 Репутация автора

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

Вкладка HTML

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

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

Автор: light_ray Размещён: 17.06.2016 09:20

0 плюса

28 Репутация автора

У меня недавно была та же проблема, и я долго смотрел документы для виджета вкладок пользовательского интерфейса JQuery . В итоге я использовал события activateи createJQuery 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')
    });
    }

});

Автор: increda_jaw Размещён: 10.08.2017 10:50
Вопросы из категории :
32x32