如何将Html页面加载到另一个页面？

Question

所以我有这个页面index.html，我想在<div> </div>之间加载另一个页面page2.html，任何想法都会有所帮助

 <ul class="navigation">
        <li><a href="#home">Home<span class="ui_icon home"></span></a></li>
        <li><a href="#aboutus">About Us<span class="ui_icon aboutus"></span></a></li>
        <li><a href="#services">Services<span class="ui_icon services"></span></a></li>
        <li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li>
        <li><a href="#contactus">Contact Us<span class="ui_icon contactus"></span></a></li>
    </ul>
</div> <!-- end of sidebar -->

<div id="main">


    <div id="content">

    <!-- scroll -->


        <div class="scroll">
            <div class="scrollContainer">

                <div class="panel" id="home">

                     <!-- this where the other page should load page2.html -->

                </div> <!-- end of home -->

Answer 1

你可以这样做：

$("#home").load("page2.html");

也就是说，使用Ajax .load()方法 ，它将“从服务器加载数据并将返回的HTML放入匹配的元素中”。

如果您想要响应导航栏中锚点的点击，最好将每个锚点的href设置为所需的URL，例如：

<li><a href="page2.html">Home<span class="ui_icon home"></span></a></li>

接着：

$(".navigation a").click(function(e) {
   e.preventDefault(); // don't do standard <a> click behaviour

   $("#home").load(this.href);
});

如果您打算开始使用jQuery，那么花半小时浏览完整的jQuery方法和选择器列表就可以了解它可以做些什么。