ページを更新せずにコンテンツを変更する方法は？

次のコードは、ページを更新せずにコンテンツを変更するために実行しようとしたコードです。私は電話をしようとしている間、home.htmlと他のページをメインページに実行できません。誰も私を助けることができる、私はこれの初心者です。前もって感謝します！ページを更新せずにコンテンツを変更する方法は？

$(document).ready(function(){ 
    $('#content').load('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>

出典

2017-12-13 Bab' A-Chi

とhome.htmlはインデックスと同じフォルダにあります？ – Stender

は、home.htmlのような実際のURLへのhrefを変更して、このようなあなたのコードを見て何かを作るsimple.jsの内容です：

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

出典

2017-12-13 13:59:34 mplungjan

ページを更新せずにコンテンツを変更する方法は？

答えて

関連する問題