Question

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

所以，我的计划是拥有一个UL菜单，其中包含不同的Li内容。当我点击它们中的每一个时，我想在我的＆＃34; Content-DIV＆＃34;中加载一个新的HTML页面。

我做了很多研究，我发现了Ajax和Jquery。我已经尝试了很多不同的代码来使其工作，并且我设法将我的.js文件成功链接到我的索引文件。我用simpel 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>

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

/马丁

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

Answer 2

您将尝试使用此代码

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

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

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

3 个答案:

JavaScript代码

HTML代码