《jQuery UI 开发指南》——第2章　选项卡2.1　选项卡的基本用法

第2章　选项卡

在目前的网站中，使用选项卡（tab）的HTML页面已经是很常见了。你可以使用选项卡按话题来组织一个站点的信息，这样用户选择相关的选项卡就可以快速方便地找到相关信息了。

2.1　选项卡的基本用法
假设我们想要编写一段HTML代码来显示图2-1所示的选项卡。它有一个选项卡栏（包含3个选项卡）并且每个选项卡里面的内容是不同的。

要用jQuery UI创建这种类型的页面，需要以下内容：

• 一个包含整个选项卡的块；
• 一个构成选项卡栏的元素；
• 每个选项卡对应的一个元素；
• 每个选项卡的窗口对应的一个元素。

下面是创建如图2-1所示页面的代码：

如果在浏览器中打开此页面（如图2-2所示），你会看到结果和预期的很不一样。为了得到想要的结果，还必须使用jQuery UI的tabs()方法。

在页面的

这样页面就会出现选项卡了。

tabs ()方法是jQuery UI的多个方法中的一个，可以在由jQuery ()函数返回的jQuery类对象上调用该方法，然后由选择器选取的结果集中的元素就被转换成选项卡了。当用户单击某个选项卡时，会自动切换到该选项卡，这一切都是jQuery UI“透明地”在管理的。