没有刷新功能的 Ajax 内容加载答案

【问题标题】：Ajax content load without refresh function没有刷新功能的 Ajax 内容加载
【发布时间】：2015-02-25 23:58:34
【问题描述】：

这里的新编码器正在寻找一些帮助，以使 ajax 将内容加载到 div (content_area) 中而无需重新加载。到目前为止，只测试前两个链接 home 和 about。

我的 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[链接] 初始内容加载工作，但无法让菜单导航点击工作。

【问题讨论】：

我不明白你的代码。在 HTML 中，您放置所有 .html 文件，然后在 .php 中附加该 href 为什么？
1) $(".sf-menu a").click 2) 我猜是 $('#content_area') 3) 又是 $('#content_area').load ('内容/' + 页面)
目前只使用主页和关于页面的链接。我正在删除所有 html 文件并在我的内容文件夹中创建 .php 文件。只是想让它在前进之前与前两个链接一起工作。
@LShetty 进行了更正，但仍未加载导航点击内容。仅加载初始页面内容。

标签： javascript jquery html ajax

【解决方案1】：

你必须使用

$('.sf-menu li a')

因为 sf-menu 不是一个 id，而是一个类。

并且您的代码需要内容文件夹中的文件以 .html.php 结尾，例如 content/agents.html.php

这是故意的吗？

【讨论】：

$('content_area').load('content/' + page + '.php'); 也有问题指定 content_area（类/ID）？
.html 菜单项将被删除（在我尝试使用 ajax 进行自动加载之前就是这样）。
更正为：$('#content_area').load('content/' + page + '.php');