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

【问题标题】：How to load a HTML-page into a DIV by clicking a Li inside a menu?如何通过单击菜单中的 Li 将 HTML 页面加载到 DIV 中？
【发布时间】：2014-03-23 09:17:25
【问题描述】：

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

所以，我的计划是有一个 UL 菜单，其中包含不同数量的 Li。当我单击它们中的每一个时，我想将一个新的 HTML 页面加载到我的“Content-DIV”中。

我做了很多研究，发现了 Ajax 和 Jquery。我已经尝试了很多不同的代码来使其工作，并且我已经成功地将我的 .js 文件链接到我的索引文件。我用一个简单的 Alert 命令进行了尝试。但是当我尝试将我的页面加载到我的 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>

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

/马丁

【问题讨论】：

home.html 页面只是一个 html sn-p 还是一个完整的 html 页面（等）。顺便说一句，这是个坏主意。如果 JavaScript 被禁用，则无法导航到您的页面。

标签： javascript jquery html css ajax

【解决方案1】：

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

JavaScript 代码

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    $("#content").load($(this).attr('href'));
  });
});

HTML 代码

<div id="Left">
  <ul id="nav">
    <li><a href="page1.html">Home</a></li>
    <li><a href="page2.html">Page 1</a></li>
    <li><a href="page3.html">Page 2</a></li>
  </ul>
</div>
<div id="content">The page will display here</div>

【讨论】：

【解决方案2】：

您将尝试使用此代码

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

【讨论】：

【解决方案3】：

从您上面的代码中，我看不到您创建了任何带有 ID 的 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>

【讨论】：