jQuery 入门教程(41): jQuery UI Tab 示例(一)分析

熊孩纸 阅读:160 2021-04-01 09:57:37 评论:0


Tab  显示多个标签页,每个标签含有一个标签头和一个Panel(显示标签的内容)。

基本用法

首先使用HTML定义用来作为Tab,一般使用列表(ul ,li) 来定义标签页的标题,每个标题使用href 链接到每个页面的内容页,比如下例定义了三个标签页:

1 <div id="tabs">
2     <ul>
3         <li><a href="#tabs-1">Nunc tincidunt</a></li>
4         <li><a href="#tabs-2">Proin dolor</a></li>
5         <li><a href="#tabs-3">Aenean lacinia</a></li>
6     </ul>
7     <div id="tabs-1">
8         <p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
9     </div>
10     <div id="tabs-2">
11         <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
12     </div>
13     <div id="tabs-3">
14         <p>Mauris eleifend est et turpis. Duis id erat. </p>
15         <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
16     </div>
17 </div>

然后使用jQuery 的 tabs()方法把这部分Html元素变为标签页

1 <script>
2     $(function () {
3         $("#tabs").tabs();
4     });
5 </script>

20130423001

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号