Вкладки пользовательского интерфейса JQuery заставляют экран «прыгать»

Question

Я использую последнюю версию вкладок jQuery UI . У меня есть вкладки, расположенные в нижней части страницы.

Каждый раз, когда я нажимаю на вкладку, экран перемещается вверх.

Как я могу предотвратить это?

Пожалуйста, посмотрите этот пример:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 1

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

Answer 2

> 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

Обратите внимание, что анимация не используется.

Answer 3

В моем случае я обнаружил, что вкладка href=#example1 заставляла страницу переходить на позицию id. Добавление фиксированной высоты к вкладкам не имело никакого значения, поэтому я просто добавил:

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

Answer 4

У меня была такая проблема. Мой код был:

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

Я просто удалил show, и это сработало как шарм!

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });

Answer 5

Вы пробовали:

fx: {opacity:'toggle', duration:100}

Answer 6

заменить href = "#" на href = "javascript: void (0);" в элементе 'a'

работает 100%

Answer 7

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