jQuery在一个页面上加载多个页面,链接在不同页面上

时间:2013-12-07 17:02:43

标签: javascript jquery html ajax

我正在尝试编写一个页面,允许用户在同一页面上阅读,而不必跳转到第二页或任何相关的“NEXT”。

我可以通过在“主”页面上预先定义它将访问多少个不同的页面以及每个要加载的页面的链接来实现这一点。

我的问题是可以做到这一点,链接位于文件夹位置的每个页面的底部,或者只能通过预先定义链接和div部分来实现。

EG,

<div class="morebox">
<p>Halvah cheesecake wafer. Marzipan tart jujubes icing dessert cheesecake jujubes danish. Topping chocolate lemon drops.</p>
<p>Unerdwear.com danish unerdwear.com. Danish candy gingerbread cookie donut liquorice. Chocolate cake gummi bears toffee liquorice chocolate bar sweet soufflé applicake carrot cake.</p>
<p>Toffee bonbon ice cream wafer muffin applicake. Chocolate cake liquorice candy candy croissant bonbon jelly beans. Soufflé cotton candy donut biscuit danish. Jelly chocolate cake cotton candy unerdwear.com macaroon soufflé gummies tootsie roll.</p>
<p>Applicake icing cotton candy jelly-o pie cotton candy lollipop. Cupcake toffee cookie bonbon. Topping donut biscuit toffee apple pie.</p>
<p>Sugar plum marzipan jelly pie. Sugar plum biscuit sweet sugar plum bonbon. Wafer ice cream marshmallow.</p>
</div>

<div class="morebox-one"></div>
<a href="ajax_more.html" id="one">Click for More</a>

<div class="morebox-two"></div>
<a href="ajax_seconds.html" id="two">Click for More</a>

正如您从上面的代码中看到的那样,链接包含在主页面中,但是在主页面上我希望它显示唯一的链接显示的是下一个要加载的相关页面的链接。

我使用的jQuery代码是

$("a").click(function(event){
var linkLocation = $(this).attr("href");
var ID = $(this).attr("id");
$("#"+ID).fadeOut(500);
$(".morebox-"+ ID).fadeOut(500, function () {
    $(".morebox-"+ ID).load(linkLocation, function () {
        $(".morebox-"+ ID).fadeIn(500)      
    });
});
return false;
});

此方法适用于较小的文档,但是应该分解以防止更长页面加载的较长页面才是此脚本的真正用途。

感谢所有关注这个问题的人,以及建议的解决方案。

0 个答案:

没有答案