单击标记时仅加载中间部分

Question

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

Answer 1

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

考虑以下带有三个不同链接的示例。使用jQuery，对于每个链接，默认导航被禁用，而内容被注入主要内容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上的实时演示。