如何使用Javascript/jQuery进行部分页面刷新

我的网站上有两个独立的可导航区域。左侧栏有自己的导航，右侧栏（主要内容区域）有自己的链接集：

我希望能够按下左侧的链接（如“简历”、“电子邮件”等），只在左侧边栏中加载新页面（而不刷新整个浏览器窗口）

我使用divs加载右侧（主要内容）导航和整个侧边栏的内容：

 <script>
  $.get("navigation.html", function(data){
    $(".nav-placeholder").replaceWith(data);
  });

  $.get("sidebar-content1.html", function(data){
    $(".sidebar").replaceWith(data);
  });

$.get（“navigation.html”，函数（数据）{
$（“.nav占位符”）.replacetwith（数据）；
});
$.get（“sidebar-content1.html”，函数（数据）{
$（“.sidebar”）.replacetwith（数据）；
});

我正在对左侧边栏执行基本相同的操作，以加载其三个链接：

<script>
  $.get("sidebar-navigation.html", function(data){
    $(".sidebar-nav").replaceWith(data);
  });
</script>

$.get（“sidebar navigation.html”，函数（数据）{
$（“.sidebar nav”）.replacetwith（数据）；
});

当我按下左侧边栏中的链接时，如何刷新该粉红色区域

---

谢谢你的帮助

首先，您不需要使用jQuery的replaceWith方法，也就是说，用于返回被替换的元素，而在本例中，您没有这些元素。您可以使用

$（“.sidebar”）.html（数据）

对于要加载到另一个div中的链接，可以在加载导航链接后立即执行类似操作

// this will interfere all the links would load inside sidebar-nav div
$("div.sidebar-nav a").click(function(event) {
  var urlToGet = $(this).attr("href"); // gets the url of the link
  $.get(urlToGet, function(data) { // loads the url
    $("div.main-content").html(data); // puts the loaded url content to main-content 
  });

    event.preventDefault();
});

---

如果我正确理解了您的问题，那么您可能会发现JQuery的

.on（）

和

.load（）

函数在这里很有用

.on（）

方法允许您在页面中添加内容，这在您看到

navigation.html

的内容被动态添加到页面时非常有用

.load（）

基本上通过单个方法调用实现了使用

$.get（）

和

$.replaceWith（）

所做的操作

有关如何协同工作的详细信息，请参阅以下评论：

/*
Use $.on() to associate a click handler with any link nested under .sidebar-nav, 
even if the links are dynamically added to the page in the future (ie after a 
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {

  /*
  Get the href for the link being clicked
  */
  var href = $(this).attr('href');

  /*
  Issue a request for the html document
  or resource at href and load the contents
  directly into .sidebar if successful
  */
  $('.sidebar').load(href);

  /*
  Return false to prevent the link's default
  navigation behavior
  */
  return false;
})

---

希望有帮助

您可以使用下面的示例

刷新
var content=“刷新”
$（文档）.ready（函数（）{
$（“#刷新”）。单击（函数（）{
$（'#div3'）.html（content）；//它只会覆盖以前的html
});
});

啊！我想加载同一分区内的链接。因此，单击“关于”、“恢复”等将加载粉红色区域中的内容，而保留白色区域未刷新。我试过了，但没有成功：$（“div.nav-container a”）。单击（函数（事件）{var urlToGet=$（this.attr（“href”）；//获取链接的url$.get（urlToGet，函数（数据）{//加载url$（“div.sidebar-content”）.html（数据）；//将加载的url内容放入侧边栏内容}）；event.preventDefault（）；}）`然后只需更改

$（“div.main-content”）.html（数据）

到

$（“div.sidebar”）.html（数据）这似乎也不起作用。我想知道这是否是因为
nav容器
在一个单独的文件中，只有我的侧栏导航链接？很抱歉所有的格式问题…哦，这更接近我想要做的。我遇到了一些错误，但我想我可以从这里找到答案。。。非常感谢！我有一个跟进问题。当我按两次同一链接时，整个导航栏消失。有时主内容区的内容也会进入侧边栏。我想知道你是否有什么想法？我将
作为整个边栏的容器，并将
动态加载链接。@Katherine，不客气！请考虑接受答案，如果它有助于你原来的问题：-（通过点击灰色嘀嗒图标），导航栏消失的问题可能是由你的网页上的其他JavaScript引起的。您可以在所有代码中共享到您的项目的链接或到JSFIDLE的链接吗？嗨，完成了。这是我的js小提琴的链接。我有一个带有
sidebar navigation.html
的单独文件，它只包含一个带有四个链接的div
nav容器。
<div id="div3" class="left">
    <button onclick="refresh()" id="refresh">
        Refresh
    </button>
</div>

<div id="div4" class="right"></div>

var content="<h1>refreshed</h1>"
$(document).ready(function(){
        $('#refresh').click(function(){
            $('#div3').html(content); //it will just overrides the previous html
        });
    });