javascript - 单击标签时仅加载中间部分

Question

当您单击链接(a 标签)时，大多数网站如何仅加载页面的中间部分？如果这是通过 AJAX 完成的，那么如何将 URL 更改为 a 标记中给定的 href 呢？我知道我可以使用 .load 函数，但这不会将 URL 更改为链接的 href 中给出的 URL。

Answer 1

如果链接上的点击内容被加载到网站的某个内部部分，通常会通过 AJAX 异步获取并注入(inject)到 DOM 结构中。在此过程中，网站的 URL 不会更改。

考虑以下具有三个不同链接的示例。使用 jQuery，对于每个链接，默认导航被禁用，而是将内容注入(inject)到主要内容 div 中。

HTML

<nav>
    <a href="some href 1">Link 1</a> |
    <a href="some href 2">Link 2</a> |
    <a href="some href 3">Link 3</a>
</nav>
<div id="main"></div>

JavaScript

$(document).ready(function() {
    $('nav a').click(function(event) {
        event.preventDefault(); // Prevent the default link navigation

        // This is the point where you could fetch content (for instance
        // from the href of the clicked link). For this example we just
        // generate a string containing the href.
        var content = 'Content for ' + $(this).html();

        $('#main').html(content); // Inject the content
    });
});

查看 JSFiddle 上的现场演示.