HTMLページで1つのdivを再読み込み

Question

私のページの左側にdivを含むdivがあります。ただし、ユーザーがリンクをクリックすると、ページの右側のコンテンツのみが変更されます。リンクがクリックされたときにのみ右側をロードする方法はありますか？ 「navPanel」内のリンクをクリックするたとえば、「contentPanel」は、そのリンク上のコンテンツをリロードする必要があります。

<nav id="navPanel"> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
</nav> 

<div id="contentPanel"> 
    <p>Content</p> 
</div> 

Answer 1

はい、load（）というjQuery関数を使用できます。

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 

<script> 
$(function() { 
    $(document).on("click", "#navPanel a", function(){ 
     var link = $(this).attr('rel'); 
     $("#contentPanel").load(link+" #contentPanel > *"); 
    }); 
}); 
</script> 

<nav id="navPanel"> 
    <a rel='link.html'>link 1</a> 
    <a rel='link.html'>link 2</a> 
    <a rel='link.html'>link 3</a> 
</nav> 

<div id="contentPanel"> 
    <p>Content</p> 
</div>