Question

以下代码是我尝试执行以更改内容而不刷新页面的内容。在我试图打电话时，我无法将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>

Answer 1

假设

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

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

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

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

1 个答案: