Вкладки jQuery прокручиваются вне поля зрения при навигации по длинным панелям вкладок с помощью именованных якорей

Взгляните на эту скрипку:

http://jsfiddle.net/contendia/GBTAS/

Идея состоит в том, чтобы сохранить страницу удобной для пользователей, не использующих js, путем создания вкладок только при запуске js. В противном случае я хочу представить страницу как просто стопку div. Список вкладок полностью автоматизирован в зависимости от количества вкладок, и каждая вкладка именуется в соответствии с соответствующим атрибутом id divs.

Все работает хорошо, но теперь я пытаюсь переработать событие щелчка для более общей навигации по вкладкам. Раньше я просто искал событие щелчка на одной из вкладок элемента списка (li) и запускал необходимый код для изменения вкладок.

Но теперь я хочу сделать эту функцию более общей, чтобы она работала, когда пользователь нажимает на любую привязку с хеш-значением, равным одному из идентификаторов вкладок, без необходимости нацеливаться на фактическую вкладку. Я не совсем уверен, как выбрать хэш в привязке и протестировать его по идентификаторам вкладок. У меня есть функция, которая работает в FF и IE как для щелчка по вкладке, так и для щелчка по привязке (например, <a href="#tab1">Tab 1</a>). Однако, если вкладка длиннее, чем окно просмотра, верх вкладки прокручивается в верхнюю часть окна, в результате чего ссылки на вкладки исчезают. Пользователь должен вручную прокрутить ссылки вкладок, чтобы вернуться к просмотру, чтобы перейти на другую вкладку. Я пробовал .scrollTo (), чтобы переместить страницу на место, но безуспешно.

Это просто проблема с .scrollTo или я неправильно использовал функцию щелчка?

Был бы признателен за любые идеи. Бонус, было бы здорово, если бы анимировал.

http://jsfiddle.net/contendia/GBTAS/


scroll jquery tabs hash scrolltop
person contendia    schedule 16.10.2011    source источник
comment
Та же проблема здесь, с использованием хеша с вкладками, поэтому кнопка «Назад» работает для детализации из вкладок и т. Д. Хеш, кажется, является причиной этого. Я вручную добавляю хэш при выборе вкладки, поэтому я, вероятно, могу переместить положение прокрутки обратно вверх (где находятся вкладки) одновременно, как вы предлагаете. Вы к этому пришли?   -  person philw    schedule 04.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, вот так ... Я слышал, что это не работает для вас, но это отлично работает для меня. Вот обработчик кликов, который срабатывает, когда они нажимают ссылку на вкладку, и добавляет хеш, как вы можете видеть. Без "scrollTo ()" прокрутка будет такой, как вы описываете ... с ней проблема исчезнет. Я прихожу к выводу, что установка href по какой-то причине прокручивает область просмотра браузера.

j('#tabs ul li a').click(function () {
    location.hash = j(this).attr('href');
    window.scrollTo(0, 0);
}); // Add click handler to set # in address bar
person philw    schedule 04.11.2011
comment
Я вижу, к чему вы клоните, но зачем устанавливать хеш в адресной строке, если вам это не нужно? То есть, он устанавливает себя, если вы просто добавляете цель в href, например, href = # tab2. Кроме того, window.scrollTo(0,0) делает не совсем то, что мне нужно. Вместо того, чтобы открывать вкладки, он вытягивает всю страницу вверх. Итак, я попробовал $("div.autotab-container").scrollTo(0, 0);, который отчасти работает, но все равно нажимает вкладки над окном просмотра. Кроме того, наличие хеша в ссылке не заставляет меня работать кнопку «Назад». Хеш в адресной строке меняется, но вкладки ничего не делают. Предложения? - person contendia; 15.12.2011