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

Question

请一些帮助真的很感激.

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

问题是,我希望在点击链接时将其他页面注入"main"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页面的一个想法,但名称不适用的页面.您需要为a元素或data-attr 提供id .最好的是使用链接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);
});