单击新选项卡（jQuery选项卡）时页面跳转到顶部

Question

我正在使用带有ajax的jquery选项卡。

HTML：

<div id="tabs">
    <ul>
        <li><a id='tab-1' href="/get-1.htm">1</a></li>
        <li><a id='tab-2' href="/get-2.htm">2</a></li>
        <li><a id='tab-3' href="/get-3.htm">3</a></li>
    </ul>
</div>

jquery的：

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html
            (
                "bla bla bla";
            );
        });
    }
});

Gif显示问题：

<!----------------------- IMAGE START ----------------------->

<!----------------------- IMAGE END ----------------------->

为了更加流畅，请检查此链接（选择mp4）：click me

我点击第二个标签，页面跳到顶部。另一个例子：

<!----------------------- IMAGE START ----------------------->

<!----------------------- IMAGE END ----------------------->

more smoothier

注意（第2个例子）如果我之前已经打开了标签（在1日，按下2，跳过，按1，没有跳转）。

我如何解决这个问题？

更新

很遗憾，但示例https://jqueryui.com/tabs/工作正常:(没有相同的错误。

Answer 1

当您单击内容少于当前选项卡的选项卡时，页面的整体高度会发生变化，这会影响页面的滚动位置。解决问题的一种方法＃34;这是使用heightStyle选项并将其设置为＆＃34; auto＆＃34;但是我并不完全确定如何使用ajax标签。

http://api.jqueryui.com/tabs/#option-heightStyle

$( ".selector" ).tabs({ heightStyle: "fill" });

示例：http://jsfiddle.net/4uhjF/点击标签一，向下滚动，直到看不到h1，然后点击标签2.因为标签2的内容少得多，页面的高度变化足以导致跳到顶部。解决此问题的唯一方法是确保所有选项卡的内容具有相似的高度，或者将高度设置为特定数字，并使用滚动来处理大于该高度的任何内容。 heightStyle：＆＃34; fill＆＃34;在你的情况下是最好的，因为你可以设置选项卡容器的父元素的高度来控制加载ajax的选项卡的高度。