Javascript 在目标div中打开链接

我知道这里有几个类似的问题，我诚实地阅读并尝试了所有建议的解决方案，但到目前为止没有一个对我有效，所以我真的非常感谢任何提示。 我正在建立一个投资组合网站，所有项目的链接都列在左侧smth的

div class=“projects”

中。就像这样：

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

我曾读到，这可以用Ajax实现，但我对这一点还很陌生，担心它对我来说可能有点太高级了

我真的非常感谢任何能帮助我学习的建议（我仍然相信我最终能做到！）

你能试试这个吗

注意：如果在stackoverflow上执行，演示将显示404页，它将仅在存储项目的您自己的服务器上工作

$（“.projects ul li a”）。单击（函数（e）{
e、 预防默认值（）；
var src=$（this.attr（“href”）；
$（“#iframe_main”）.remove（）；
$('', {
src:src，
id:“iframe_main”，
帧边框：0，
滚动：“否”
})
.appendTo（'main'）；
});
.main{
位置：绝对位置；
排名：0；
左：200px；
}






到底是什么问题？什么不起作用？链接无法在目标
div
中打开。相反，它们要么作为新页面打开，要么根本不显示（单击链接后，targeted
div
仍为空）。您是否正在运行要从其中加载html文件的服务器？只是检查一下！“您在控制台窗口中是否看到任何错误。@Anna您是要打开服务器本身上存在的本地页面，还是要在单击链接时打开诸如
google.com
之类的第三方链接？这些页面位于本地服务器（MAMP）上。”。Daniel H提供的解决方案很有效（几乎！），谢谢！这似乎是可行的，除了iframe由于某种原因被裁剪为非常小的尺寸（高度和宽度），因此它只适合子页面的前几个单词。你知道我该怎么解决吗？没问题：）我不确定，因为我不知道你的确切设置。也许你必须更改一些CSS代码？可以查看id为
iframe\u main
<script>
$(document).ready(function(){
$(function(){
$(".projects li a").click(function(e){
    e.preventDefault();
    var url = this.href;
    $(".main").load(url);
});
});
});
</script>