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

Question

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

我已阅读 this question我想我明白了答案

问题是，我希望在单击链接时将其他页面注入(inject)到“主”div 中。例如，当我点击 2011 时，我希望将页面 2011.html 注入(inject)到“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");
});

演示 here

这是 2011 - 2013 页面的创意，但带有名称的页面不起作用。您需要为 a 提供一个 ID元素或 data-属性。最好是使用链接 href!

如果你使用 ID，你可以使用这个:

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

和演示here

最佳选择:

给出 <a>元素正确href所以它可以被搜索引擎正确索引。喜欢:<a href='2011.html'> .然后使用这个:

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