Помните, какая вкладка была активной после обновления
85333 просмотра
16 ответа
Я использую вкладки jquery на веб-странице, и когда страница обновляется, она теряет ту вкладку, на которой я когда-либо была, и возвращается к первой вкладке.
Кто-нибудь сталкивался с этой проблемой и знает, как ее решить?
Автор: thegunner Источник Размещён: 12.11.2019 09:54Ответы (16)
21 плюса
Я предполагаю, что вы используете вкладки 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:1938 плюса
Как и другие, я боролся со своей историей файлов 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
11 плюса
Более простая альтернатива, которую я только что реализовал:
$(".tabs").tabs({
select: function(event, ui) {
window.location.replace(ui.tab.hash);
},
});
Это добавит значение хеша к URL, так что обновление страницы перезагрузит эту вкладку, и location.replace
вместо location.hash
этого мы не заполняем историю пользователя нежелательными шагами назад.
Надеюсь, это поможет.
Автор: Hatcham Размещён: 28.03.2012 03:375 плюса
Теперь, когда 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
4 плюса
Короткий, независимый от макета способ сделать это с помощью 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
2 плюса
Когда веб-страницы обновляются, они перезагружают свое состояние с сервера, снова запрашивая страницу.
Либо веб-серверу необходимо запоминать состояние и предоставлять файл иначе, чем по умолчанию, либо вы можете использовать файлы cookie или хэш-компонент URL-адреса и некоторый jQuery для хранения состояния, чтения его при загрузке и восстановления.
См. Плагин jquery.cookie или SWFaddress , узнайте о манипулировании хэш-значениями самостоятельно или плагином jQuery History.
Хеш-метод особенно привлекателен, поскольку он копирует изменения URL, поэтому копирование / вставка URL все еще работает, как и закладки.
Автор: Orbling Размещён: 28.11.2010 10:181 плюс
Включите плагин 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 плюс
Вы можете попробовать что-то вроде этого, это довольно легко сделать.
# 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
1 плюс
Другой вариант - использовать хранилище html 5. Смотрите здесь для примера: http://www.w3schools.com/html/html5_webstorage.asp
Автор: Maurizio In denmark Размещён: 02.07.2013 07:291 плюс
Вот альтернативный способ, позволяющий запоминать открытую вкладку по идентификатору элемента (не по индексу). Это полезно, если вы используете этот код для синхронизации открытых вкладок на двух разных страницах с похожими элементами (такими как страница показа и редактирования).
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
0 плюса
Вы можете использовать плагин jQuery History , вот демо (загрузите другую ссылку в демо и попробуйте обновить)
Автор: Josh Stodola Размещён: 28.11.2010 10:180 плюса
Моя компания блокирует куки, поэтому я нашел обходной путь. Просто следите за вкладкой, используя скрытое поле, и передайте это значение обратно после завершения запроса. Это не красиво, но это делает работу.
<% 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:110 плюса
Как вы думаете, вы можете добавить ту же функцию в коде ниже.
$(".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
0 плюса
$(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:580 плюса
Я решил ту же проблему с помощью следующего блога .
Вкладка 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:200 плюса
У меня недавно была та же проблема, и я долго смотрел документы для виджета вкладок пользовательского интерфейса 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')
});
}
});
Автор: increda_jaw Размещён: 10.08.2017 10:50Вопросы из категории :
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- jquery Как получить результат из модального диалога в JQuery
- jquery Удалите все классы, начинающиеся с определенной строки.
- jquery Как мне остановить эффект в jQuery
- jquery Как показать загрузочный счетчик в jQuery?
- jquery-plugins Как я могу проверить, загружен ли плагин jQuery?
- jquery-plugins Как получить размер изображения (высота и ширина) с помощью JavaScript?
- jquery-plugins Тематика jQuery-UI - различия в размерах CSS
- jquery-plugins jquery tablesorter отключает функцию отправки
- jquery-plugins Круговая диаграмма с JQuery
- jquery-plugins Как я могу использовать плагин jQuery Round Corner для создания закругленных углов?
- jquery-plugins Какой самый простой способ вызывать функцию каждые 5 секунд в jQuery?
- jquery-plugins Как закрыть jgrowl вручную
- jquery-plugins jQuery UI Автозаполнение конфигурации поиска виджетов
- jquery-plugins Как отсортировать по дате с помощью плагинов DataTables jquery?