如何在单击选项卡时停止重新加载页面？ （jQuery的）

Question

我在重新加载页面时遇到问题。我编写了一个简单的jQuery脚本，它将通过内容进行制表。你可以在这里看到它：http://www.jonathanmaloy.com/tabstack/

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

preventDefault（）并返回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();
});

提前感谢您的帮助！

Answer 1

修改：根据正确阅读问题更新答案： - ）

正如评论中所讨论的，当显示新标签并隐藏先前显示的标签时，会出现问题。上一个选项卡的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事件，并且浏览器不会继续执行并按照 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;
});

<击>