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

Question

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

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

Answer 1

Как и другие, я боролся со своей историей файлов 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 ) 
        }
    }); 
    }); 

Answer 2

Я предполагаю, что вы используете вкладки пользовательского интерфейса jQuery,

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

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

Answer 3

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

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

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

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

Answer 4

Теперь, когда 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 });
    }
});

Answer 5

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

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

---

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

jQuery UI:

$("#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>

Answer 6

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

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

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

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

Answer 7

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

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>

Answer 8

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

Answer 9

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

# 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

Answer 10

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

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

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

var cookieName = "mycookie";

$("#tabs").tabs({
    selected : ($.cookies.get(cookieName) || 0),
    select : function(e, ui) {
        $.cookies.set(cookieName, ui.index);
    }
        });