如何在不刷新页面的情况下更改内容？答案

【问题标题】：how to change content without refreshing the page?如何在不刷新页面的情况下更改内容？
【发布时间】：2017-12-13 13:54:18
【问题描述】：

以下代码是我试图在不刷新页面的情况下更改内容。当我尝试调用时，我无法将 home.html 和其他页面执行到主页中。谁能帮帮我，我是这方面的初学者。提前致谢！

$(document).ready(function(){
  $('#content').load('home.html');
})

ul #nav {
  list-style:none;
  padding:0;
  margin: 0 0 10px 0;
}

ul #nav li {
  display:inlne;
  margin-right:10px;
}

<!Doctype html>
<html>
  
  <head>
  <title>Website Name</title>
  <link rel="stylesheet" href="styles.css" />
  </head>
  
  <body>
    
    <!-- Nav -->
    <ul id="nav">
      <li><a href="home">Home</a></li>
      <li><a href="about">About Us</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
    
    <!-- Content which would change without refreshing the page  -->
    <div id="content"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="simple.js">
    </script>
    
  </body>
  
</html>

<!-- home.html-->

<h1>Home</h1>
<p>Simple Text</p> 

<!-- about.html-->

<h1>About Us</h1>
<p>Simple Text</p> 

<!-- contact.html-->

<h1>Contact</h1>
<p>Simple Text</p>

【问题讨论】：

并且 home.html 与您的索引在同一个文件夹中？

标签： javascript jquery html css

【解决方案1】：

假设

$(document).ready(function(){
  $('#content').load('home.html');
})

是 simple.js 的内容，然后将 href 更改为实际的 URL，例如 home.html，并使您的代码看起来像这样：

$(function() {
  $("#nav").on("click","a",function(e) {
    e.preventDefault(); // cancel the link
    $("#content").load(this.href); // load the href
  });
})

【讨论】：