Question

当我在jQuery UI中使用带有这样的简单模板的选项卡时：

<div id="products-tabs">
    <ul>
        <li><a href="#product-1">Product 1</a></li>
        <li><a href="#product-2">Product 2</a></li>
    </ul>

    <div id="product-1">
        Product 1
    </div>
    <div id="product-2">
        Product 2
    </div>
</div>

JS：

$('#products-tabs').tabs();

然后一切正常。但我想在标签之间添加不同交换的效果。例如：

$('#products-tabs').tabs({
    show: { effect: "fadeIn", duration: 800 }
});

它可以工作，但是当我在页面底部有标签时，当我点击其中一个标签时，窗口的位置会重置回顶部。我该如何预防？

这里小提琴：http://jsfiddle.net/46a8y/3/（只需滚动到输出窗口的底部，看看我的意思）

Answer 1

更新您的jquery版本，jquery 2.1.0或1.9.1正常工作。

Answer 2

激活标签后，您可以拨打回叫跳转到页面底部吗？

activate: function(){
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
}

像这样：http://jsfiddle.net/46a8y/4/

Answer 3

将标签div包裹在另一个固定高度的div中：

<div id="wrapper">your tabs</div>

jsfiddle

jQuery UI选项卡 - 显示选项重置窗口位置

3 个答案: