本节书摘来自异步社区《jQuery UI开发指南》一书中的第2章，第2.1节，作者：【美】Eric Sarrion 译者：罗晴明 ,包勇明更多章节内容可以访问云栖社区“异步社区”公众号查看。
在目前的网站中，使用选项卡（tab）的HTML页面已经是很常见了。你可以使用选项卡按话题来组织一个站点的信息，这样用户选择相关的选项卡就可以快速方便地找到相关信息了。
2.1 选项卡的基本用法假设我们想要编写一段HTML代码来显示图2-1所示的选项卡。它有一个选项卡栏（包含3个选项卡）并且每个选项卡里面的内容是不同的。
要用jQuery UI创建这种类型的页面，需要以下内容：
一个包含整个选项卡的块；一个构成选项卡栏的元素；每个选项卡对应的一个元素；每个选项卡的窗口对应的一个元素。下面是创建如图2-1所示页面的代码：
如果在浏览器中打开此页面（如图2-2所示），你会看到结果和预期的很不一样。为了得到想要的结果，还必须使用jQuery UI的tabs()方法。
在页面的
这样页面就会出现选项卡了。
tabs ()方法是jQuery UI的多个方法中的一个，可以在由jQuery ()函数返回的jQuery类对象上调用该方法，然后由选择器选取的结果集中的元素就被转换成选项卡了。当用户单击某个选项卡时，会自动切换到该选项卡，这一切都是jQuery UI“透明地”在管理的。
相关资源：jQuery UI制作选项卡（tabs）