Question

任何人都可以用最简单的代码告诉我，如何通过简单的点击将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”中，每次单击不同的页面按钮时，每个页面都会替换先前加载的页面。就这样。

我希望我做了什么，我试图明确表达水晶，希望不要留下任何重要的东西。

Answer 1

假设您可以使用javascript / jQuery（您不会在您的环境中提供大量信息）......

查看jQuery load（）方法。

http://api.jquery.com/load/

<div id="myDiv"></div>
<button id="myButton">Click Me</button>

<script type="text/javascript">
    $( document ).ready( function() {
        $( '#myButton' ).click( function() {
            $( '#myDiv' ).load( 'test.html' );
        });
    });
</script>

这应该是你的负担。我会把剩下的留给你：）

编辑：

好的，更符合你所寻找的......

假设你可以修改标记并为你的元素添加一个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（）和stopPropagation（）。唯一的另一个区别是我们没有静态加载“test.html”。我们通过使用jQuery的$（this）确定要加载的html页面，它表示触发该函数的元素。使用attr（）方法，该方法返回元素的特定属性的值。在这种情况下，href属性。

有问题吗？

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

1 个答案: