JQuery вкладки UI, заставляющие экран “переходить”

Существует намного более простой способ, которым я обнаружил из комментариев эта страница , которая должна просто удалить href = "#", и это не будет больше переходить к вершине! Я проверил, и это работает на меня. Аплодисменты

> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

спасибо за Вашу справку! Сообщите мне то, что еще Вы находите.

вышеупомянутые функциональные работы (экран не перемещается постоянно)..., но, экран является очень шатким по щелчку.

Вот простой пример, показывающий, как нажатие вкладки заставляет экран переходить к вершине (без вышеупомянутого кода): http://5bosses.com/examples/tabs/sample_tabs.html

Примечание, что нет никакой используемой анимации.

Я предпочитаю иметь href = "#" в моих ссылках, которые не берут пользователя нигде, но можно сделать это, пока Вы добавляете, что onclick = "возвращает false";. ключ, я предполагаю, не отправляет пользователя в "#", который в зависимости от браузера, кажется, принимает значение по умолчанию как вершина текущей страницы.

Спасибо за Вашу справку. Хорошее предложение, но я попробовал прежде без удачи. Я думаю JQuery, UI может переопределять мои усилия.

Вот код на вкладку:

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

я уже попробовал это без успеха:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

Вот простой пример (без, возвращают false): http://5bosses.com/examples/tabs/sample_tabs.html

Какие-либо другие предложения?

Мне дали решение для этого...

, Как мешать экрану подпрыгнуть, когда вкладка нажата:

Обертка отделение, которое содержит вкладки в отделении с фиксированной высотой.

Посмотрите пример здесь: http://5bosses.com/examples/tabs/sample_tabs.html

Мое предположение - то, что Вы анимируете свои переходы вкладки? У меня есть та же проблема, где прокрутка страницы переходит назад к вершине каждым щелчком.

я нашел это в источнике jQuery:

 // Show a tab, animation prevents browser scrolling to fragment,

Достаточно уверенный, если у меня есть это:

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

мой код переходит к вершине и является раздражающим (но существует анимация). Если я изменяю это на это:

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

нет никакой анимации вкладки, но переключающийся между вкладками является гладким.

я нашел способ заставить его прокрутить назад, но это не надлежащая фиксация, поскольку браузер все еще переходит к вершине после нажатия на вкладку. Прокрутка происходит между событиями tabsselect и tabsshow, таким образом, следующий код переходит назад к Вашей вкладке:

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

я буду больше отправлять успехи, которые я делаю.

Если у Вас есть что-то вдоль этих строк:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

Попытка, добавляющая return false; после команды активации вкладки:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

У меня была та же проблема, плюс мои вращались сами по себе, поэтому, если бы вы находились внизу страницы, окно браузера прокрутка вверх до вершины. У меня сработала фиксированная высота контейнера вкладок. По-прежнему странно то, что если вы выйдете из окна или вкладки и вернетесь назад, они все равно будут прокручиваться. Но это не конец света.

Если вы анимируете переходы между вкладками (например, .tabs ({fx: {opacity: 'toggle'}}); ), то вот что происходит:

В большинстве случаев скачки не вызваны переходом браузера по ссылке "#". Страница прыгает, потому что в середине анимации между двумя панелями вкладок обе панели вкладок полностью прозрачны и скрыты (как в display: none), поэтому эффективная высота всего раздела с вкладками на мгновение становится равной нулю.

И если раздел с вкладками нулевой высоты приводит к тому, что страница становится короче, тогда страница будет казаться подпрыгивающей, чтобы компенсировать это, тогда как на самом деле она просто изменяет размер, чтобы соответствовать (на мгновение) более короткому содержанию. Имеет смысл?

Лучший способ исправить это - установить фиксированную высоту для раздела с вкладками. Если это нежелательно (поскольку содержимое вкладки различается по высоте), используйте вместо этого следующее:

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

Он установит вычисленную высоту панели перед переходом вкладки. После появления новой вкладки высота снова устанавливается на «авто». Для Overflow установлено значение «скрыто», чтобы контент не вырывался за пределы панели при переходе с короткой вкладки на более высокую.

Это то, что у меня сработало. Надеюсь, это поможет.

заменить href="#" на href=" JavaScript: недействительным (0);" в элементе 'a'

работает на 100%