Я получаю много жалоб от пользователей, что, когда они используют мои вкладки на основе jQuery, они раздражают, что когда они возвращаются в свой браузер, они переходят не на предыдущую вкладку, а на предыдущую страницу. , Я добавил следующие предыдущие / следующие кнопки, но недостаточно. Как я могу перенастроить свои кнопки так, чтобы пользователи переходили на предыдущую вкладку, а не на предыдущую страницу, когда они нажимали стрелку браузера назад. Вы можете проверить это здесь .
$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
if (index == 0) {
index = 1;
}
$('.quicktabs-tabs li').eq(index - 1).addClass('active');
$('.quicktabs-tabs li').eq(index - 1).find('a').click();
return false;
});
$('.tablink-next').click(function () {
var length = $('.quicktabs-tabs').first().children().size();;
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
// if (parseInt(index) == parseInt(length) - 1 ) {
// index = index - 1;
// }
if (parseInt(index) == parseInt(length) - 1) {
window.location.href = '/home'; //redirect to home
//index = index - 1;
}
$('.quicktabs-tabs li').eq(index + 1).addClass('active');
$('.quicktabs-tabs li').eq(index + 1).find('a').click();
return false;
});
javascript
jquery
Efe
источник
источник
Ответы:
Вы можете использовать историю.
Выдвинуть историческое состояние при открытии новой вкладки
Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/History_API
источник
Без вашего полного кода я не могу дать вам сделанный на заказ пример, но вы можете просто добавить якорные теги к каждой вкладке, содержащей div.
Это будет обновлять URL каждый раз, когда пользователь нажимает на ссылку вкладки. Эти изменения URL будут сохранены в истории браузера и будут вызваны при переходе назад.
Обновленный URL будет выглядеть так каждый раз, когда вы нажимаете вкладку:
https://example.com#Tab1https://example.com#Tab2https://example.com#Tab3https://example.com#Tab4источник
с одной стороны, ваша следующая функция вкладки написана на javascript, а с другой стороны, кнопка назад в браузере использует историю браузера, так что это не имеет отношения к вашим функциям и вообще не может привести вас к предыдущей вкладке.
Таким образом, у вас есть два способа сделать это:
1-й: попробуйте загрузить каждый шаг на отдельной странице, обновив браузер, чтобы страница сохранялась в истории браузера и, нажав кнопку назад, вы можете увидеть предыдущий шаг
2-й: у вас должна быть кнопка «предыдущий», чтобы увидеть предыдущий шаг точно так же, как ваша кнопка следующего шага
источник
Я использовал загрузочные вкладки с навигацией по вкладкам браузера ниже, полный пример
Вы можете проверить живой рабочий пример моего кода
1> Перейти на https://www.notesgen.com (использовать рабочий стол)
2> Создайте свой аккаунт как студент
3> Перейти к моей учетной записи / Мои загрузки
4> Нажмите на мои соединения
источник
Изменение хеша похоже на нажатие состояния,
history.pushStateкоторое вызываетpopstateсобытие. Попадание назад и вперед в браузере вызовет появление и выдвижение этих состояний, так что вам не понадобится никакой другой пользовательский обработчик.PS: Вы можете добавить стиль CSS
:targetиз вашегоactiveкласса. Вwindow.addEventListener('popstate'здесь только журналы , чтобы показать вам событие , кромеevent.stateвсегда будет нулевым в этом случае.Запустите фрагмент кода, попробуйте перемещаться по вкладкам, а затем используйте кнопки браузера назад и вперед.
источник
Первое, что вам нужно, запретите ссылке отправлять URL в истории с помощью $ event.preventDefualt () в событии клика и настройте историю с помощью history.pushState (data, title, url) .
В js у нас есть событие, которое помогает нам контролировать события «назад» и «вперед» пользователем. Это событие называется «popstate». Вы можете использовать его с помощью window.addEventListener (popstate, callback) . в функции обратного вызова вы можете активировать и деактивировать вкладку (добавить и удалить класс) и извлечь URL.
Я показываю это с примером кода. для лучшего понимания лучше попробовать его на сервере или на локальном сервере, потому что изменение URL здесь ограничено:
источник