jQuery/AJAXを使用してHTML divの内部でHTMLページコンテンツを読み込むにはどうすればよいですか？

Question

メインHTMLファイル（index.html）の中にあるdivコンテナに、リンクをクリックした後、htmlファイル（home.html）の内容をロードして、jquery/ajaxを使用したいとします。私は答えを見つけようとしましたが、htmlではなくphpに関する回答だけに出くわしました。

これは、これまで私が持っているhtmlコードです：

<!-- navigation bar --> 
    <nav> 
    <ul> 
     <li><a href="#" data-target="home.html">HOME</a></li> 
     <li><a href="#" data-target="work.html">MY WORK</a></li> 
     <li><a href="#" data-target="about.html">ABOUT ME</a></li> 
     <li><a href="#" data-target="services.html">SERVICES</a></li> 
     <li><a href="#" data-target="contact.html">CONTACT ME</a></li> 
    </ul> 
    </nav> 

    <!-- content div --> 

    <div id="content"> 

    </div> 

    <!-- footer --> 
    <section> 
    </section> 
    <footer> 
    <p>Copyright &copy; 2017, All Rights Reserved</p> 
    </footer> 
</div> 

Answer 1

あなたが次のことを試すことができます。ここではload.htmlの内容を取得して、content divに入れています。

<!-- navigation bar --> 
      <nav> 
      <ul> 
       <li><a href="#" data-target="home.html">HOME</a></li> 
       <li><a href="#" data-target="work.html">MY WORK</a></li> 
       <li><a href="#" data-target="about.html">ABOUT ME</a></li> 
       <li><a href="#" data-target="services.html">SERVICES</a></li> 
       <li><a href="#" data-target="contact.html">CONTACT ME</a></li> 
      </ul> 
      </nav> 

      <!-- content div --> 

      <div id="content"> 

      </div> 

      <!-- footer --> 
      <section> 
      </section> 
      <footer> 
      <p>Copyright &copy; 2017, All Rights Reserved</p> 
      </footer> 
     </div> 

<script> 
$("#content").load("/resources/load.html"); 
</script> 

Answer 2

jQueryのコードは次のようになります。これは、すべてのaの要素をループ

$('a').each(function(b,c){  //loop through each a element 
    $(c).on('click',function(){ //add click event listener 
     var link = $(this).attr('data-target'); //get the link from attribute 
     $('#content').load(link); //load the link's content into container 
    }); 
}); 

うとdata-target属性からのリンクを取得します。あなたのウェブページにjQueryを追加することを忘れないでください。