Изменение хэша, но не перемещение страницы с помощью вкладок пользовательского интерфейса jquery

Question

Я добавил следующий код для изменения хэша на имя вкладки:

$("#tabs > ul").tabs({ 
select: function(event, ui){ 
window.location.hash = ui.tab.hash; 
} 
} );

Это хорошо работает в FF3, но в IE7 он перемещается вниз по странице (в зависимости от того, какая вкладка выбрана в любом месте от верхней части страницы до самого конца страницы).

Я попытался изменить его на:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})

Это приводит к одинаковому поведению в IE7 и FF3, что перемещает страницу вниз в верхнюю часть выбранной вкладки.

Я бы хотел, чтобы вкладка была изменена, хэш был обновлен, но страница вообще не перемещалась, как это работает в FF3 в моем первом примере, но не в IE7.

Спасибо.

Примечания: JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

Если на странице есть элемент, который имеет тот же идентификатор, что и то, для чего вы устанавливаете хеш, например, вы пытаетесь установить хэш браузера на #cars, и на странице уже есть автомобили div #, браузер прокрутит вас туда, где находится этот div.

Насколько мне известно, есть 3 возможных обходных пути

1) Измените хеш браузера на что-то другое, например #thecars.

2) Аналогичным образом измените существующую разметку.

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

Answer 2

То, что предложил Крис, сработало для меня, понятия не имел, что даже div может связать через #. Итак, мое решение довольно простое, в обработчике событий show: я делаю следующее, оно не идеально, потому что кнопка возврата не будет в истории, но это еще одна работа для плагина истории BBQ. Все мои div'ы просто имеют id = "tab-cars", id = "tab-trucks" ... убирают часть 'tab-' и помещают ее в хеш URL.

var name = ui.panel.id.substr(4);
location.hash = '#'+name;

Answer 3

Вы могли бы попытаться иметь «return false;» после того, как вы установили расположение окна, но я не уверен.

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

Возможно, вы захотите взглянуть на Tabs v2 , который использует плагин History / Remote , хотя он не обновлен для jQuery 1.3 +.

Это демо проще для понимания. Если вы посмотрите на javascript source , вы заметите использование iframes для обработки состояний.

Существует также плагин History Event и плагин jHistory для достижения желаемого.

Хотелось бы услышать в ответ, как все обернется и с каким решением вы пришли.