Question

我使用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;

}

Answer 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）;获得理想的效果。

使用Jquery选项卡时阻止跳转到页面顶部

1 个答案: