Question

我有一个非常简单的页面，菜单中包含三个<ul>和内容div：http://jsfiddle.net/vvqPN/

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);
    });
});

在页面中，当您单击第一个<ul>时，第一个内容加载到内容div中，然后当您单击第二个<ul>时，第二个内容加载到内容div中并且同样的事情对于第三个内容。我试图解决的问题是，当您在页面中向下滚动并尝试单击任何<ul>时，页面会自动返回到页面顶部。

Answer 1

使用preventDefault();禁用锚标记的默认行为（链接到某些内容）。

$('#menu').on('click', 'li:not(.current) a', function (event) { //Add event
  event.preventDefault();
  ...
});

Answer 2

阻止锚标记的默认点击事件。否则，更改网址，并将页面发送到顶部。

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

http://jsfiddle.net/HM633/

将内容加载到div中

2 个答案: