Как в JQuery UI tabs сделать deep linking?

Question

[Андрей]

Пытаюсь найти в документации к JQuery UI, как сделать, что бы при переключении табов в адресной строке отображался id таба через значок хэша site.ru/news#tab_1.

Знаю во многих библиотеках такое есть по умолчанию или включается через настройки, но тут не нашёл https://api.jqueryui.com/tabs/

Может не там смотрел? Помогите, пожалуйста, сделать

Answer 1

[Денис]

$("#tabs").tabs({
  create: function(e, ui) {
    location.hash = ui.panel.selector;
  },
  activate: function(e, ui) {
    location.hash = ui.newPanel.selector;
  }
});

Comments

[Дмитрий]

И к сожалению, при инициализации страницы с хешем придется парсить его руками, искать нужный таб и активировать его.

[Андрей]

Не понял вас, вроде же рабочий вариант?

[Денис]

Андрей , да, вариант абсолютно рабочий. Даже если в опциях установить активной не первую вкладку, то всё равно хеш установится правильный (активного таба)

[Андрей]

Денис: А не подскажете, как в этом варианте сделать, что бы при клике по табам не было перехода на якорную ссылку? А то при клике всё время скрол браузера опускается вниз к контенту таба

[Денис]

Андрей , думаю, что есть какие-то менее "костыльные" варианты, но нет времени вникать:

$(function(){
	var posTop = 0,
	htmlBody = $('html, body');
	$( "#tabs" ).tabs({
		create: function( e, ui ) {
			location.hash = ui.panel.selector;
			htmlBody.scrollTop(0);
		},
		beforeActivate: function( e, ui ) {
			posTop = $(window).scrollTop();
		},
		activate: function( e, ui ) {
			location.hash = ui.newPanel.selector;
			htmlBody.scrollTop(posTop);
		}
	});
});