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

Question

请，一些帮助将不胜感激。

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

问题是，我希望在单击链接时将另一个页面注入“主”div。例如，当我点击 2011 时，我希望将页面 2011.html 注入到“主”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

Try this:

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

Demo here

This is a idea for 2011 - 2013 pages, but the ones with name wont work. You need to either give a id to the a element or a data- attr. The best would be to use the links href!

In case you use ID you can use this:

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

And demo here

The best option:

Give the <a> element the correct href so it can be properly index by search engines. Like: <a href='2011.html'>. And then use this:

$('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