jQuery 入门教程(41): jQuery UI Tab 示例（一）

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>

 

«  jQuery 入门教程(40): jQuer...