Question

我有一个简单的脚本，我用于标签式导航。它只是隐藏并显示一个div。但是，当我从标签更改为标签时，屏幕始终会回到顶部！任何人都知道如何阻止它？我的脚本如下：

<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});
</script>

Answer 1

我认为您的点击处理程序需要preventDefault()。

这将阻止浏览器平移到顶部。

像这样：

//On Click Event
$("ul.tabs li").click(function(e) {
    e.preventDefault();
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
});

Answer 2

尝试更改点击处理程序以定位<a/>标记，而不是<li/>标记：

//On Click Event
$('ul.tabs li a').click(function() {
    $('ul.tabs li').removeClass('active');
    $(this).closest('li').addClass('active');
    $('.tab_content').hide();
    var activeTab = $(this).attr('href');
    $(activeTab).fadeIn();

    return false; // prevent default action of <a/> element
});

发生这种情况的原因是，即使您在<li/>代码的点击处理程序上返回false，<a/>代码的点击事件也会冒泡并在它包含在<li/>标记中的同一时间。由于没有点击处理程序阻止</a>标记＆＃39;默认操作，页面跳转到顶部 - 这是假设href属性以哈希开始。

我希望这有帮助！

停止脚本滚动回到页面顶部onclick

2 个答案: