单击选项卡时，如何阻止页面重新加载?(jQuery）

How do I stop the page from reloading when clicking on tabs? (jQuery)

本文关键字：jQuery 新加载 加载 选项 何阻止 单击      更新时间：2023-09-26

我在重新加载页面时遇到问题。我已经编写了一个简单的jQuery脚本，它将遍历内容。你可以在这里看到它的作用：http://www.jonathanmaloy.com/tabstack/

问题是页面会重新加载并从顶部开始。我希望能够让它保持在相同的位置，这样当你点击下一个选项卡时，你就不必向下滚动页面回到它。

preventDefault（）和return false并不能解决问题

如果你还需要什么，请告诉我，但通过上面的链接，你可以看到一切。

这是我当前的jQuery代码：

$(document).ready(function() {
    $('#tabnav li').click(function() {
        $(this).not('.active').each(function() {
            $('.tab').hide();
            $('#tabnav li.active').removeClass('active');
        });
        $(this).addClass('active'); 
        $($(this).attr('title')).fadeIn(450);
    });
    $('#tabnav li:first').click();
});

提前感谢您的帮助！

编辑：根据正确阅读问题更新答案：-）

正如在评论中所讨论的，当显示新的选项卡而隐藏以前显示的选项卡时，问题就会出现。上一个选项卡的DOM删除会缩小页面，这会导致浏览器跳到页面顶部，看起来像是页面重新加载，而实际上不是。

下面的JavaScript首先存储可见的选项卡，并在新选项卡开始淡出后将其删除。我还做了一些更改，通过存储一些jQuery对象来加快函数的速度，这样就可以节省每次重新查询DOM的时间。还要注意，您不需要each()，因为使用不同的选择器可以获得相同的结果，而且在原始代码中，您多次有效地隐藏了所有.tab类元素。

$(function() {
  var tabItems = $('#tabnav li'); // save looking this up multiple times
  $('.tab').hide(); // hide all initially
  $('#tabnav li').click(function() {
    // remove active class from all and store the visible tab
    tabItems.removeClass('active');
    var visibleTab = $('.tab:visible');
    // add class to selected list item
    $(this).addClass('active');
    $(this.title).fadeIn(450); // show new tab
    visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
  });
  $('#tabnav li:first').click();
});

您想调用event.preventDefault()或在函数末尾添加一个return false;（此函数不需要event）。

默认情况下，浏览器将执行绑定到被点击元素的任何点击函数，然后跟随导致浏览器重新加载页面的链接（我认为是href="#"或类似链接）。由于您将函数绑定到click事件，因此需要停止click事件的继续，浏览器将不会继续执行，并遵循href。

JavaScript

$('#tabnav li').click(function(event) { // <-- added the eventData map
    $(this).not('.active').each(function() {
        $('.tab').hide();
        $('#tabnav li.active').removeClass('active');
    });
    $(this).addClass('active'); 
    $($(this).attr('title')).fadeIn(450);
    event.preventDefault(); // or return false;
});

相关文章：