Вкладки jQuery прокручиваются вне поля зрения при навигации по длинным панелям вкладок через именованные привязки - PullRequest
Новая
       12

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

0 голосов
/ 17 октября 2011

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 04 ноября 2011

Хорошо, вот, пожалуйста. Я слышал, что это не работает для вас, но прекрасно работает для меня. Вот обработчик кликов, который срабатывает, когда они нажимают на вкладку, и добавляет хэш, как вы можете видеть. Без "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
...