Javascript 如何通过单击菜单中的Li将HTML页面加载到DIV中？

我遇到了一个非常恼人的问题

所以，我的计划是有一份UL菜单，里面有不同数量的锂。 当我点击它们时，我想把一个新的HTML页面加载到我的“contentdiv”中

我做了很多研究，发现了Ajax和Jquery。我尝试了很多不同的代码来实现它，并且成功地将我的.js文件链接到我的索引文件。我用simpel警报命令试过了。 但是当我试图将我的页面加载到DIV中时，它根本不起作用，我也不知道出了什么问题！ 我在stackoverflow上找到了一个几乎相同的链接，尽管他们没有使用菜单打开页面

这是我的索引：

<div id="Left">
    <ul id="nav" >
        <li><a href="Home.html id="load_home">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a>
    </ul>
</div>

<div id="content">


</div>

<script>$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("Home.html");
    });
 });
</script>

$（文档）.ready（函数（）{
$（“#加载#home”）。在（“单击”，函数（）上{
$（“#content”）.load（“Home.html”）；
});
});

有什么想法吗？任何答案都将不胜感激。 多谢各位

---

/Martin

您以错误的方式编写了jQuery代码。另外，请确保您正在调用jQuery库文件

JavaScript代码

$（文档）.ready（函数（）{
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
$（“#content”）.load（$（this.attr（'href'））；
});
});

HTML代码

页面将显示在此处

根据您上面的代码，我看不出您创建了任何ID为：-content的DIV 因此jquery是可以的，但是从上面的代码中我可以说……jquery无法找到#content div

请参阅以下示例，这可能对您的情况有所帮助：-

<ul>
    <li><a id="page1" href="#">About</a></li>
    <li><a id="page2" href="#">Community</a></li>
    <li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

在头部，我们需要包括JQuery库

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

将以下代码添加到头部零件

<script type="text/javascript">
    $(document).ready(function(){
       $("#page1").click(function(){
        $('#result').load('pages/page1.html');
         //alert("Thanks for visiting!");
       }); 

       $("#page2").click(function(){
        $('#result').load('pages/page2.html');
         //alert("Thanks for visiting!");
       });
     });
</script>

$（文档）.ready（函数（）{
$（“#第1页”）。单击（函数（）{
$（'#result'）.load（'pages/page1.html'）；
//警惕（“谢谢光临！”）；
}); 
$（“#第2页”）。单击（函数（）{
$（'#result'）.load（'pages/page2.html'）；
//警惕（“谢谢光临！”）；
});
});

您将尝试使用此代码

$(document).ready( function() {
    $.get('Home.html', function(data) {
        $("#content").html(data);
    });
});

---

home.html页面只是一个html片段还是一个完整的html页面（等等）。顺便说一句，这是个坏主意。如果禁用JavaScript，则不会导航到页面。