Javascript 单击选项卡时如何阻止页面重新加载？（jQuery）

我在重新加载页面时遇到问题。我已经编写了一个简单的jQuery脚本，它将对内容进行分页。你可以在这里看到它的作用：

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

preventDefault和ReturnFalse不会修复此问题

如果还有什么你需要让我知道，但通过上面的链接，你可以看到一切

以下是我当前的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的时间。还要注意的是，您不需要每个元素，因为使用不同的选择器可以获得相同的结果，而且在原始代码中，您多次有效地隐藏了所有.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();
});

您想要调用或添加返回false；您不需要将此事件拖到函数末尾

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

JavaScript 编辑：在正确阅读问题的基础上更新答案：-

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

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

您想要调用或添加返回false；您不需要将此事件拖到函数末尾

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

JavaScript

---

我以前两种方法都试过了，只是又试了一次，但都没用。我应该在问题中提到这一点。我已经用你的建议更新了问题中的URL，以显示它不起作用。啊，好吧，我认为跳转是因为你用$'.tab'.hide隐藏了选项卡；它正在从DOM中删除选项卡，页面长度很小。如果你看一下我在问题中添加的链接，你会发现我没有使用锚，正是因为这个原因，我希望避免重新加载，但似乎单击功能仍然强制…也许。用户所单击的是一个li。没有锚，是的，我现在明白了。问题在于，在显示新选项卡之前，您正在删除隐藏旧选项卡的选项。如果您将JavaScript代码添加到外部加载的文件中，我可以在Chrome中本地编辑它，而无需全部保存：效果很好。感谢您提供的解决方案和洞察力。我以前尝试过这两种方法，但都没有成功。我应该在问题中提到这一点。我已经用你的建议更新了问题中的URL，以显示它不起作用。啊，好吧，我认为跳转是因为你用$'.tab'.hide隐藏了选项卡；它正在从DOM中删除选项卡，页面长度很小。如果你看一下我在问题中添加的链接，你会发现我没有使用锚，正是因为这个原因，我希望避免重新加载，但似乎单击功能仍然强制…也许。用户所单击的是一个li。没有锚，是的，我现在明白了。问题在于，在显示新选项卡之前，您正在删除隐藏旧选项卡的选项。如果您将JavaScript代码添加到外部加载的文件中，我可以在Chrome中本地编辑它，而无需全部保存：效果很好。谢谢你 你需要一个解决方案和洞察力。