javascript - AJAX加载内容无页面刷新

Question

我绞尽脑汁试图找出为什么这行不通。初始页面加载的内容确实加载得很好，但单击菜单链接根本没有任何反应。它不会加载页面。将鼠标悬停在菜单链接上会显示正确的内容 URL，但单击它们不会执行任何操作。这里是测试站点。菜单链接 1 和菜单链接 2 是测试链接。内容将加载到主内容 div 中:brandonbutler.com/alex/

我从 this tutorial 获取了代码。这是我正在使用的代码:

$(document).ready(function() {

// initial page load
$('#main').load('toc-content/landing.html');

// handle menu click
$('ul#keepcolors li a').click(function(){
    var page = $(this).attr('href');
    $('#main').load('toc-content/'+ page +'.html');
    return false;
});

});

Answer 1

我访问了您的网站并看到了这个:

<a href="toc-content/toc1.html">menu 1</a>

这意味着做

var page = $(this).attr('href');
$('#main').load('toc-content/'+ page +'.html');

将导致页面为“toc-content/toc1.html”并且您尝试加载此内容:“目录内容/目录内容/toc1.html.html”

改为:

 var page = $(this).attr('href');
 $('#main').load(page);

希望对你有帮助!