在目标div中打开链接

Question

I know there's been several similar questions here, and I honestly read and tried out all the suggested solutions, but none of them worked for me so far, so I'll be really thankful for any hints. I'm building a portfolio website where links to all the projects are listed in a div class="projects" on the left, smth. like that:

<div class="projects">
    <ul>
        <li class="music" ><a href="project1.html">project1</a></li>
        <li class="writing"><a href="project2.html">project2</a></li>
        <li class="art"><a href="project3.html">project3</a></li>            
    </ul>
</div>

<div class="main">
</div>

When a respective link is clicked, the project (which has a separate page and should ideally have a separate URL) should open in a div class="main" on the right without reloading the whole page.

I've tried it with iframe, which somewhat worked, but in this case it's impossible to give each project a separate URL which is really important in this case.

I've also tried different variations of this script, but also with no result (either nothing happened or project page opened, but not in the desired div):

<script>
$(document).ready(function(){
$(function(){
$(".projects li a").click(function(e){
    e.preventDefault();
    var url = this.href;
    $(".main").load(url);
});
});
});
</script>

I've read that this could be done with Ajax, but I'm really new to this and afraid it might be a little too advanced for me.

I'll be really thankful for any advice that will help me learn (I still believe I can get it done eventually!)

Answer 1

Can you try this?

NOTE: The demo will show you 404 pages if you execute it on stackoverflow, it will only work on your own server where the projects are stored.

$(".projects ul li a").click(function(e) {
    e.preventDefault();
  
  var src = $(this).attr("href");

  $("#iframe_main").remove();

  $('<iframe>', {
     src: src,
     id:  "iframe_main",
     frameborder: 0,
     scrolling: 'no'
     })
     .appendTo('.main');
});

.main {
    position: absolute;
    top: 0;
    left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projects">
    <ul>
        <li class="music" ><a href="project1.html">project1</a></li>
        <li class="writing"><a href="project2.html">project2</a></li>
        <li class="art"><a href="project3.html">project3</a></li>            
    </ul>
</div>

<div class="main">
</div>

I've tried it with iframe, which somewhat worked, but in this case it's impossible to give each project a separate URL which is really important in this case.

You can see that each project has it's own URL.

I tested it on my local webserver and it works, the page is not going to reload after clicking a link just as requested.

</div>