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

时间：2021-10-27 00:30:47

Please, some help would be truly appreciated.

请一些帮助真的很感激。

I have read this question and I think i understood the answers

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

The thing is, I want the other page to be injected into the "main" div when a link is clicked. For example, when I click 2011, I want the page 2011.html to be injected into the "main" div.

问题是,我希望在单击链接时将其他页面注入“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>

How can I do this?

我怎样才能做到这一点?

Thanks in advance!

提前致谢!

2 个解决方案

#1

5  

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!

这是2011 - 2013页面的一个想法,但名称不适用的页面。您需要为a元素或data-attr提供id。最好的方法是使用链接href!

In case you use ID you can use this:

如果您使用ID,您可以使用此:

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

为元素提供正确的href,以便搜索引擎可以正确索引。喜欢:。然后用这个:

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

#2

0  

I know 2 options:

我知道2个选项:

  1. using ajax (asynchronous JavaScript and XML)
    you can learn that here: http://www.w3schools.com/ajax/

    使用ajax(异步JavaScript和XML),你可以在这里学到:http://www.w3schools.com/ajax/

  2. prepend/append a iframe

    prepend / append iframe

#1

5  

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!

这是2011 - 2013页面的一个想法,但名称不适用的页面。您需要为a元素或data-attr提供id。最好的方法是使用链接href!

In case you use ID you can use this:

如果您使用ID,您可以使用此:

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

为元素提供正确的href,以便搜索引擎可以正确索引。喜欢:。然后用这个:

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

#2

0  

I know 2 options:

我知道2个选项:

  1. using ajax (asynchronous JavaScript and XML)
    you can learn that here: http://www.w3schools.com/ajax/

    使用ajax(异步JavaScript和XML),你可以在这里学到:http://www.w3schools.com/ajax/

  2. prepend/append a iframe

    prepend / append iframe

标签：

相关文章