Question

我一直在努力想弄清楚为什么这样做不会起作用。初始页面加载的内容确实加载正常，但单击菜单链接什么都不做。它不会加载页面。将鼠标悬停在菜单链接上可显示正确的内容网址，但点击它们不会执行任何操作。这是测试网站。菜单链接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”并且你试图加载这个： “TOC-内容/ TOC含量/ toc1.html.html”

改为：

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

希望它有所帮助！

Answer 2

Google围绕异步＆＃39;。

问题是页面是在$（＆＃39; ul＃keepcolors ...＆＃39;）之后加载的。click（..）执行所以它没有将点击绑定到任何元素，因为这些元素不会存在于页面上，直到$（＆＃39; main＆＃39;）。load（..）完成。

试试这个：

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

AJAX加载内容无页面刷新

2 个答案: