单击链接时如何将整个页面加载到div中？

Question

请提供一些帮助，我们将不胜感激。

我已经读过这个问题 ，我想我理解了答案

问题是，我希望单击链接时将另一个页面注入到“主” div中。 例如，当我单击2011时，我希望将页面2011.html注入“ main” div中。

    <div id="cssmenu" class="sixteen columns">
        <ul>
           <li><a href='#'><span>2011</span></a></li>
           <li><a href='#'><span>2012</span></a></li>
           <li><a href='#'><span>2013</span></a></li>
           <li><a href='#'><span>Edições Especiais</span></a></li>
           <li><a href='#'><span>Estat&iacute;sticas</span></a></li>
        </ul>
    </div>

    <div id="separator" class="sixteen columns">
    </div>
    <div class="sixteen columns" id="main" style="margin-top: 15px; margin-bottom: 15px">

    </div>

我怎样才能做到这一点？

提前致谢！

Answer 1

尝试这个：

$('li a').click(function (e) {
    e.preventDefault();
    var name = $(this).find('span').text();
    $("#main").load(name + ".html");
});

在这里演示

这是2011-2013年页面的想法，但是带有名称的页面将无法工作。 您需要可以给一个ID的a元素或一个data- ATTR。 最好的办法是使用链接href！

如果您使用ID，则可以使用以下方法：

$('li a').click(function (e) {
    e.preventDefault();
    var name = this.id;
    $("#main").load(name + ".html");
});

在这里演示

最佳选择 ：

为<a>元素提供正确的href以便搜索引擎可以对其正确索引。 像： <a href='2011.html'> 。 然后使用：

$('li a').click(function (e) {
    e.preventDefault();
    $("#main").load(this.href);
});

Answer 2

我知道2种选择：

1. 使用ajax（异步JavaScript和XML）
   您可以在这里了解到： http : //www.w3schools.com/ajax/

2. 前置/追加iframe