jquery - 防止在单击锚点上跳转到顶部 jquery 选项卡功能

Question

我在 I-net 中发现了这个非常棒的选项卡功能。我已经阅读了使用锚点时的标准问题：Windows 跳转到顶部。尽管集成了一个 e.PreventDefault() 和一个 Live Eventlistener，但单击选项卡时它仍然跳到顶部。你能给我一个建议吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('ul.tabs').each(function () {
        var $active, $content, $links = $(this).find('a');
        $active = $links.first().addClass('active');
        $content = $($active.attr('href'));

        $links.not(':first').each(function () {
            $($(this).attr('href')).hide();
        });

        // Binde den click event handler
        $(this).on('click', 'a', function (e) {
            // Mache den alten Tab inaktiv
            $active.removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));
            $active.addClass('active');
            $content.fadeIn(800);
            e.preventDefault();
        });
    });
});
</script>

Answer 1

搜索event.preventDefault, stopPropagationand return false（测试了很多时间）
，并且，将 HREF 更改为javascript:void(0)（如果可以的话）

e.preventDefault 有时无法做到这一点。我发现最好的方法是在名为 onclick 的函数末尾添加 return false。

        // Binde den click event handler
        $(this).on('click', 'a', function (e) {
            e.preventDefault();
            // Mache den alten Tab inaktiv
            $active.removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));
            $active.addClass('active');
            $content.fadeIn(800);
            e.stopPropagation();
            return false;;
        });