Jquery 将内容加载到div中

我有一个非常简单的页面，带有包含三个

和内容div的菜单：

jQuery：

$(document).ready(function () {
    $('.subcontent:gt(0)').hide();
    $('#menu').on('click', 'li:not(.current) a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.subcontent:visible').hide(600);
        // fade in new selected subcontent
        $('.subcontent[id=' + $(this).attr('data-id') + ']').show(600);
    });
});

在页面中，当您单击第一个

时，第一个内容加载到内容div中，然后当您单击第二个

时，第二个内容加载到内容div中，第三个内容也是如此。 我试图解决的问题是，当您向下滚动页面并尝试单击任何

s时，页面会自动返回到页面顶部。

使用

preventDefault（）

禁用锚定标记的默认行为（链接到某物）

---

防止锚定标记的默认单击事件。否则，url将被更改，页面将被发送到顶部

$('#menu').on('click', 'li:not(.current) a', function (e) {
    e.preventDefault();

---

您的锚链接正在寻找一个定义为

#

的锚，该锚不存在，因此，它会将您发送到文档顶部。您可以将

指定为锚定链接的

href

，也可以按照下面@kunalbhat的建议执行。我建议@kunalbhat的答案，因为它不引人注目。是页面被重新加载，还是仅仅因为锚标签不存在而将它们发送到顶部？更好的解决方案是什么，你的还是另一个，为什么？老实说，mine和@kunalbhat之间的唯一区别在于，他使用了完整的语义

事件

变量名，而我将mine缩短为

e

。它们在功能上完全相同。

事件

是Internet Explorer中的全局变量。因此，作为一种跨浏览器处理事件的方式，您经常会看到

函数（e）{e=e | | event；}

来获取事件对象，因为它并不总是直接传递给回调。您的或另一个更好的解决方案是什么，为什么？老实说，他们是一模一样的，我的只是第一个：P

$('#menu').on('click', 'li:not(.current) a', function (e) {
    e.preventDefault();