使用 Jquery 选项卡时防止跳转到页面顶部答案

【问题标题】：prevent jump to top of page when using Jquery tabs使用 Jquery 选项卡时防止跳转到页面顶部
【发布时间】：2011-12-08 05:22:31
【问题描述】：

我使用jquery创建了标签，每次切换到另一个标签时，它都会跳转到页面顶部。有什么办法可以防止这种情况吗？代码如下：

$(document).ready(function() {

    $('.display_menu_element a').click(function(){
        switch_tabs($(this));
            return false;
    });

    switch_tabs($('.defaulttab'));

});

function switch_tabs(obj)
{
    $('.display_tab').hide();
    $('.display_menu_element a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).fadeIn(1200);
    obj.addClass("selected");

    return false;

}

【问题讨论】：

标签： jquery web-applications jquery-ui-tabs

【解决方案1】：

这是因为当你点击一个“标签”时，你基本上点击了一个锚（标签），“a”标签的“href”需要设置为它所在的div的ID参考。

请查看文档和演示http://jqueryui.com/demos/tabs/

更深入的信息，考虑简单的选项卡演示，下面是包含用户所在“选项卡”的列表项点击，如果用户点击“Nunc tincidunt”，第一个“href”属性设置为“#tabs-1”的选项卡，然后如果 ID 为“#tabs-1”的 div 不在视图中，浏览器将滚动到那里。

<div id="tabs">
    <ul> 
        <li><a href="#tabs-1">Nunc tincidunt</a></li> <!-- a click on this -->
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"> <!-- will point to this -->
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu...</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc..</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante...</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi...</p>
    </div>
</div>

基本上你需要使用“select”方法 $( selector ).tabs( "select", index );得到想要的效果。

【讨论】：