jquery - 如何使用 jQuery 进行部分页面更新？

Question

我有导航菜单。单击时，仅应从 html 内容文件(服务器中的文件)更新页面内容 div，而不进行整个页面刷新。

如何使用 jQuery 实现此目的？

Answer 1

照常构建菜单，即

<ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

以及内容的占位符。

<div id="content"></div>

然后运行与此类似的代码

$("#menu li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        // do something after content has been loaded
    });
});