在有针对性的div中打开链接

Question

我知道这里有几个类似的问题，我诚实地阅读并尝试了所有建议的解决方案，但目前为止他们都没有为我工作，所以我会非常感谢任何提示。 我正在建立一个投资组合网站，其中链接到所有项目在左边div class="projects"列出，smth。这样的：

<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> 

当用户点击相应的链接，该项目（其中有一个单独的页面，并最好有一个单独的URL）应该在右侧一个div class="main"无需重新加载整个页面打开。

我试过它iframe，这有点奏效，但在这种情况下，不可能给每个项目一个单独的URL，这在这种情况下非常重要。

我也试过这个脚本的不同变化，但还没有结果（无论是什么都没有发生或项目页面打开，但不能在期望div）：

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

我读过这可以用Ajax来完成，但我对这个真的很陌生，害怕它对我来说可能有点太高级了。

我会在任何意见，这将有助于我学习（我仍然相信我可以把它做最终！）

Answer 1

你能试试这个真的很感谢？

注意：演示将显示404页，如果你在stackoverflow上执行它，它只会在你自己的服务器上工作的地方存储项目。

$(".projects ul li a").click(function(e) { 
 
\t 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>

我和iframe中，这在一定程度曾尝试过，但在这种情况下 这是不可能给每个项目一个单独的URL是在这种情况下，真正 重要。

您可以看到每个项目都有自己的URL。

我在我的本地网络服务器上测试过它，它可以正常工作，页面在按照要求单击链接后不会重新加载。