Html 从导航按钮将页面加载和卸载到div中

有谁能用最简单的代码告诉我，如何通过简单的单击将html页面加载和卸载到名为myDiv的div中

当我按下导航菜单上的另一个按钮时，我将卸载myDiv并替换为另一个页面

这个的设置是什么

编辑

我有3页page1.html，page2.html，page3.html

我的导航如下：

<ul>
  <li><a href="page1.html"></a></li>
  <li><a href="page2.html"></a></li>
  <li><a href="page3.html"></a></li>
</ul>

我试图将这些页面加载到myDiv中，每次单击不同的页面按钮时，每个页面都会替换以前加载的页面。就这些

---

我希望我能像crystal一样清楚地说明我要做的事情，希望不要遗漏任何重要的内容。

假设你可以使用javascript/jQuery，你就不会给出很多关于你的环境的信息

看看jQuery加载方法

那就够了。剩下的就留给你了：

编辑：

好的，你要找的是更多的东西

假设您可以修改标记并向a元素添加class属性

<ul>
    <li><a href="page1.html" class="dynamicLoad"></a></li>
    <li><a href="page2.html" class="dynamicLoad"></a></li>
    <li><a href="page3.html" class="dynamicLoad"></a></li>
</ul>

<script type="text/javascript">
    $( document ).ready( function() {
        $( 'a.dynamicLoad' ).click( function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#myDiv' ).load( $( this ).attr( 'href' ) );
        });
    });
</script>

因此，任何具有dynamicLoad类的“a”元素在单击时都会触发此操作。我们不希望浏览器尝试跟随链接，所以我们使用preventDefault和StopRopagation。唯一的另一个区别是我们没有静态加载test.html。我们使用jQuery的$this来确定要加载的html页面，它表示触发函数的元素。使用attr方法，该方法返回元素的特定属性的值。在本例中，使用href属性

---

问题？

假设您可以使用javascript/jQuery，那么您不会提供很多关于您的环境的信息

看看jQuery加载方法

那就够了。剩下的就留给你了：

编辑：

好的，你要找的是更多的东西

假设您可以修改标记并向a元素添加class属性

<ul>
    <li><a href="page1.html" class="dynamicLoad"></a></li>
    <li><a href="page2.html" class="dynamicLoad"></a></li>
    <li><a href="page3.html" class="dynamicLoad"></a></li>
</ul>

<script type="text/javascript">
    $( document ).ready( function() {
        $( 'a.dynamicLoad' ).click( function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#myDiv' ).load( $( this ).attr( 'href' ) );
        });
    });
</script>

因此，任何具有dynamicLoad类的“a”元素在单击时都会触发此操作。我们不希望浏览器尝试跟随链接，所以我们使用preventDefault和StopRopagation。唯一的另一个区别是我们没有静态加载test.html。我们使用jQuery的$this来确定要加载的html页面，它表示触发函数的元素。使用attr方法，该方法返回元素的特定属性的值。在本例中，使用href属性

---

问题？

我不确定编辑是如何改变的？页面上有一个div，可能id属性为myDiv。当单击导航元素时，您希望将HTML页面加载到该div中。同样，我认为您希望通过AJAX来完成。假设所有这些都是正确的，上面的代码将执行您想要的操作。好的。。。。那么$'myDiv'。加载'test.html'？在我看来，要加载的页面是硬编码的。如何将任何页面加载到myDiv中，而不是仅加载test.html？现在，当我尝试您的代码时，单击nav按钮，会打开一个全新的页面，而不是我想要的div。是的，我的示例是将test.html硬编码到div中。这是一个如何通过AJAX将页面加载到div中的示例。这并不是为了给你想要的东西。这是一个起点。至于为什么单击导航按钮会加载一个全新的页面，如果不看到您的代码是不可能的。请随意将其粘贴到JSFIDLE，我会看一看。顺便说一句，我会指出您在SO上已经活跃了一天，问了4个问题。。。收到8个答案，但未接受其中任何一个。如果答案确实回答了您的问题，请随时标记为已接受。到目前为止，您的最新代码似乎可以做到这一点。如果我有任何问题，我会告诉你的。我不确定编辑是如何改变的？页面上有一个div，可能id属性为myDiv。当单击导航元素时，您希望将HTML页面加载到该div中。同样，我认为您希望通过AJAX来完成。假设所有这些都是正确的，上面的代码将执行您想要的操作。好的。。。。那么$'myDiv'。加载'test.html'？在我看来，要加载的页面是硬编码的。如何将任何页面加载到myDiv中，而不是仅加载test.html？现在，当我尝试您的代码时，单击nav按钮，会打开一个全新的页面，而不是我想要的div。是的，我的示例是将test.html硬编码到div中。这是一个如何通过AJAX将页面加载到div中的示例。这并不是为了给你想要的东西。这是一个起点。至于为什么单击导航按钮会加载一个全新的页面，如果不看到您的代码是不可能的。请随意将其粘贴到JSFIDLE，我会看一看。顺便说一句，我会指出您在SO上已经活跃了一天，问了4个问题。。。收到8个答案，但未接受其中任何一个。请随时联系我们

---

如果答案确实回答了您的问题，请将其标记为“已接受”。到目前为止，您的最新代码似乎已经做到了这一点。如果我有任何问题，我会告诉你