JQuery UI選項卡導致屏幕「跳」

Question

我正在使用最新版本的jQuery UI tabs。我的標籤位於頁面底部。

每當我點擊一個標籤，屏幕就會跳到頂部。

我該如何防止這種情況發生？

請看下面的例子：

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

Answer 1

如果你有這些方針的東西：

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

使用這個標籤激活命令後加入return false;：

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

Answer 2

謝謝您的幫助。好的建議，但我沒有運氣之前嘗試過。我認爲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

任何其他建議？

Answer 3

我的猜測是你正在爲你的標籤轉換動畫？我遇到同樣的問題，每次點擊頁面滾動跳回頂部。

我發現這個在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); 
}); 

我會發布更多的進步我做。

Answer 4

> 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 5

我得到了一個解決方案...

如何從被點擊選項卡時跳起來停止屏幕：

包裹包含在一個固定的高度一個div標籤股利。

見這裏的例子：http://5bosses.com/examples/tabs/sample_tabs.html

Answer 6

還有一個更簡單的方法，這是我從評論上發現this page是簡單地刪除的href =「＃」，它不會跳到頂端更多！我驗證了它對我有用。乾杯

Answer 7

我更喜歡在我的鏈接中沒有帶用戶的href =「＃」，但只要添加onclick =「return false;」就可以做到這一點。我想，關鍵是不會將用戶發送到「＃」，這取決於瀏覽器似乎默認爲當前頁面的頂部。

Answer 8

我有同樣的問題，加上我自己旋轉，所以如果你在頁面的底部，瀏覽器窗口將滾動到頂部。有一個固定的標籤容器高度爲我工作。一種奇怪的事情仍然是，如果你離開窗口或標籤並返回，它仍然會滾動。雖然不是世界末日。

Answer 9

如果你在你的動畫過渡標籤（即.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'); 
    } 
}); 

這將設置窗格的計算高度的標籤轉換之前。一旦出現新選項卡，高度將重新設置爲「自動」。溢出設置爲「隱藏」，以防止從較短的標籤跳到較高的標籤時內容脫離窗格。

這是爲我工作。希望這可以幫助。

Answer 10

用href =「javascript：void（0）;」替換href =「＃」在「一」元素

工程100％

Answer 11

你有沒有tryed：

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

Answer 12

邁克的解決方案表現出的原則，極大地但它有一個很大的缺點 - 如果結果網頁是短，屏幕上會無論如何跳到頂部！唯一的解決辦法是記住scrollTop，並在切換標籤後將其恢復爲。但恢復前，放大頁面（HTML標籤） appropriatelly：

（編輯 - 修改新的jQuery UI API +小改進大頁）

$(...).tabs({ 
    beforeActivate: function(event, ui) { 
     $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop 
    }, 
    activate: function(event, ui) { 
     if (!$(this).data('scrollTop')) { // there was no scrolltop before 
      jQuery('html').css('height', 'auto'); // reset back to auto... 
        // this may not work on page where originally 
        // the html tag was of a fixed height... 
      return; 
     } 
     //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop()); 
     if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved 
      return;    // nothing to be done 
     // scrolltop moved - we need to fix it 
     var min_height = $(this).data('scrollTop') + $(window).height(); 
      // minimum height the document must have to have that scrollTop 
     if ($('html').outerHeight() < min_height) { // just a test to be sure 
          // but this test should be always true 
      /* be sure to use $('html').height() instead of $(document).height() 
       because the document height is always >= window height! 
       Not what you want. And to handle potential html padding, be sure 
       to use outerHeight instead! 
        Now enlarge the html tag (unfortunatelly cannot set 
       $(document).height()) - we want to set min_height 
       as html's outerHeight: 
      */ 
      $('html').height(min_height - 
       ($('html').outerHeight() - $('html').height())); 
     } 
     $(window).scrollTop($(this).data('scrollTop')); // finally, set it back 
    } 
}); 

工程與fx效果了。

Answer 13

嘗試使用css添加每個標籤內容區域（而不是標籤本身）的最小高度。這爲我修好了。 :)

Answer 14

我與jQuery的用戶界面的菜單同樣的問題 - 在錨上的點擊事件的preventDefault（）從滾動回到頂端停止頁：

$("ul.ui-menu li a").click(function(e) { 
     e.preventDefault(); 
}); 

Answer 15

使用event.preventDefault();嘗試。在切換選項卡的點擊事件上。我的功能如下所示：

$(function() { 
     var $tabs = $('#measureTabs').tabs(); 
     $(".btn-contiue").click(function (event) { 
      event.preventDefault(); 
      $("#measureTabs").tabs("option", "active", $("#measureTabs").tabs ('option', 'active')+1 ); 
     }); 
    }); 

Answer 16

我有這樣的問題。我的代碼是：

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

我只是刪除show和它的工作就像一個魅力！

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

Answer 17

我在我的案例中發現的標籤href=#example1是導致頁面跳轉到id的位置。添加一個固定高度的標籤並沒有區別，所以我只是說：

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