本节书摘来自异步社区《jQuery UI开发指南》一书中的第2章，第2.1节，作者：【美】Eric Sarrion 译者：罗晴明 ,包勇明更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章　选项卡

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

2.1　选项卡的基本用法

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

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

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

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

在页面的

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

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