无刷新功能的Ajax内容加载

Question

这里的新程序员正在寻找一些帮助，让ajax在不重新加载的情况下将内容加载到div（content_area）中。到目前为止只测试了前两个链接home&关于

我的js文件：

    $(document).ready(function()    {
    //initial
    $('#content_area').load('content/home.php');
    //handle menu clicks
    $('.sf-menu li a').click(function(){
        var page = $(this).attr('href');
        $('#content_area').load('content/' + page + '.php');
        return false;
    }); 
});

我的菜单是：

<div class="main-menu-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <nav class="navigation">
          <ul class="sf-menu">
            <li><a href="home">Home</a></li>
            <li><a href="about">About Us</a></li>

顺便说一下，现场测试站点是[链接]http://www.newconstructionflorida.net[链接]初始内容加载工作，但无法使菜单导航点击工作。

Answer 1

您必须使用

$('.sf-menu li a')

因为sf菜单不是一个id，而是一个类。

并且您的代码需要content文件夹中的文件具有.html.php结尾，如content/agents.html.php

这是故意的吗？