本文介绍了用于页面标签的jQuery插件是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

http://biblia.com/上的标签如何工作?每次单击都会更改页面,而无需页面导航.有谁知道任何可以完成相同任务的jQuery插件?

How do the tabs on http://biblia.com/ work? each click alters the page without any need for page navigation. Does anyone know of any jQuery plugin that can accomplish the same thing?

推荐答案

您可以获得类似的jQuery UI选项卡控件,但是您正在谈论的是将内容加载到隐藏元素中,然后根据需要隐藏并显示当前的标签"或使用Ajax延迟加载内容.

You could get the jQuery UI tab control to something similar, but you're talking about either loading the content into hidden elements which are then hidden and show depending on the current "tab" or lazy loading the content using Ajax.

设置Jquery UI选项卡控件非常简单.该示例来自网站 jQuery UI :

It's simple enough to set up a Jquery UI tab control. This sample is from the web site jQuery UI:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>

然后,您可以处理select事件,以显示/加载页面上的其他内容.例如

You can then handle the select event to display/load other content on your page. e.g.

$( "#tabs" ).tabs({
   select: function(event, ui) {
   $.get('ajax/test.html', function(data) {
   $('#mycontentdiv').html(data); }
});

此事件没有选择内容的条件,但是可以使用tabs()函数获取当前选项卡并根据该内容动态加载内容.

This doesn't have condition on the event to select the content, but could use the tabs() function to get the current tab and dynamically load content based on that.

在上面的示例中,它将检索到的html内容放入div id="mycontentdiv".

In the example above it would put the retrieved html content in the div id="mycontentdiv".

这篇关于用于页面标签的jQuery插件是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-12 02:47
查看更多