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

时间:2014-03-23 01:09:41

标签: javascript jquery html css

所以我有这个页面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 -->

1 个答案:

答案 0 :(得分:2)

你可以这样做:

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

也就是说,使用Ajax .load() method,它将从服务器加载数据并将返回的HTML放入匹配的元素中。&#34;

如果您想要响应导航栏中的锚点点击,最好将每个锚点的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,花费半小时浏览complete list of jQuery methods and selectors就可以了解它可以做些什么。