Jquery 在div之间动态更改页面内容？

我正在寻找一种方法来更改单个页面的内容，而不是使用jQuery或任何类似工具将用户重定向到新页面。我对脚本编写非常陌生，因此非常感谢您的帮助

我已经在JSFIDLE中创建了一个快速模型，演示了站点的基本布局以及当用户请求不同页面时我想要更改的内容：

代码：

$('nav li').on('click', 'a', function(e){ //step 1
  e.preventDefault(); //prevent default action, step2
  var url = $(this).attr('href'); //get the url, step 2

  $.ajax({ //step 3
    url: url,
    //your other options
    success: function(response){ //on success
      $('YOUR MAIN DIV').html(response); //update your div, step 4
    }
  });
});

HTML:

如您所见，站点的中间区域是应该进行操作的地方。其余部分（导航栏和页脚）应保持固定

---

作为参考，我使用了jQuery、“Modernizer”和HTML5的历史API，以便为每次内容更改保留唯一的URL；这正是我想要做的，但我似乎无法思考如何使其适用于我当前的设计。非常感谢您的任何帮助，哪怕是一个小小的提示，也能在路上帮助我。我对网页设计/开发非常陌生，有很多东西要学。

你需要的就是

AJAX

。基本程序可以是：

在导航

链接
上附加
单击
事件

当用户单击链接时，

阻止默认操作

并获取

href

中的内容

使用

AJAX

从该

链接中获取内容

用新内容更新主内容div

例如：

$('nav li').on('click', 'a', function(e){ //step 1
  e.preventDefault(); //prevent default action, step2
  var url = $(this).attr('href'); //get the url, step 2

  $.ajax({ //step 3
    url: url,
    //your other options
    success: function(response){ //on success
      $('YOUR MAIN DIV').html(response); //update your div, step 4
    }
  });
});

根据评论进行编辑

您的实现存在问题。您的目标是不存在的

$（'#link1'）

。按如下方式更改导航的链接：

<ul class="nav navbar-nav">
   <li><a href="#">Home</a></li>
   <!-- The script below will get the data from href attribute of anchor tag -->
   <!-- So your href attribute should target file you want to load your content from -->
   <li><a href="external.html">Link 1</a></li> 
   <li><a href="external2.html">Link 2</a>
   ...
</ul>

或者，如果您希望当前实现正常工作，请向

锚定
标记提供
id
，如下所示

<a href="#" id="link1">



另外，请确保将脚本包装在
$（document.ready（function（）{}）
我认为您应该检查jQuery Mobile，它将处理AJAX加载的页面并保留URL

感谢您的回复，现在我正在尝试：
$（“#link1”）。单击（函数（e）{e.preventDefault（）；$.ajax（{type:'GET'，url:'external.html'，success:function（data）{$（“#main#u page”）.html（data）}}）但它似乎不起作用，没有填充任何内容。有什么想法吗？我的外部引用html文件应该在哪里才能链接？对不起，我有点生气。还在学习！谢谢你的更新，我现在理解了这个过程。然而，我仍然有困难，在经历了一些挫折之后，我发现问题在于我的AJAX“get”调用。例如，假设我有另一个html文件（“other.html”），我想加载它的内容。我会使用这个：
$.ajax（{url:“other.html”，键入：“get”，success:function（data）{$（#main_page）.html（data）；}）
理论上，这应该是可行的，但是没有加载数据。AJAX调用从未达到“成功”。我确保正在使用
$（document）.ready（function（）{}）
。我不确定是什么导致了这个问题。我道歉！没有引用外部html文件，因为我没有在web服务器上运行代码，因此无法找到它。
$(document).ready(function(){
    $("ul.nav li a").click(function(e){ 
        e.preventDefault();
        var url = $(this).attr('href'); //get the link you want to load data from
        $.ajax({ 
         type: 'GET',
         url: url,
         success: function(data) { 
            $("#main_page").html(data); 
        } 
       }); 
     });
  });

<a href="#" id="link1">