Tab，也叫制表符，英文用Tab（Module-Tabs）表示。 Tab 将不同的内容重叠地放置在一个布局块中，并且在重叠的内容区域中一次只能看到其中之一。
选项卡可以在同一空间中显示更多信息，并将相似的主题归为一类，以便用户更好地理解。 Tab的应用可以在不牺牲信息量的情况下，缩短页面的屏幕长度，降低信息的显示密度。 在这些趋势下，Tab等交互元素已经成为越来越普遍的应用。
Tabs on the Web可能早在2005年就在amazon.com的主页上引入了。如今，各大门户网站、电子商务公司和各种网站的主页上都使用了Tabs。 目前，新浪和网易在其主页上使用不少于10个标签。 由于门户网站主要依靠广告收入，首页的位置规范成本非常高。
新浪首页2014.11.13
搜狐首页2014.11.13
选项卡功能 每个选项卡都由标题区域和内容区域组成。 内容区域和标题一一对应。 至少有两组选项卡，以便您可以切换所有选项卡。 仅选中一个选项卡（当前选项卡），点击键盘或上移切换时高亮显示
标准的Tab标题设计时是放在底部的，也有很多放在两边的
置于顶部和侧面的标题比较少见，不符合人们的阅读习惯。
选项卡内容加载表单
通常有三种形式
html片段：这种方式最常见，页面打开后才加载tab内容，缺点是页面内容比第一帧内容还加载，导致页面打开缓慢 iframe请求：很多广告使用这些方法，可以促进页面加载，缺点是Ajax请求切换后无法立即显示：通过异步请求拼接tab内容，优缺点与iframeTab相同
Tab的实现很简单，只要HTML结构合理，JS在标题上添加click或mouseover即可切换显示。 这里采用HTML属性配置的方法，主要通过3-5个属性来实现。
data-ui="u-tab"：Tab的内包裹元素 data-ui="tab-nav"：Tab的所有标题元素 data-ui="tab-content"：Tab的所有内容元素 data-ui= "tab -arror"：Tab切换时的动画元素 data-iframe="http://xxx.jd.com/a.htm"：内容为iframe的Tab元素
示例1：最简单的Tab只需要添加前三个属性
HTML结构如下
例2：切换时，标题横线有动画效果时
类似的设计也用在易迅首页地板的Tab上。 与示例1相比javascript 选项卡，只多了一个data-ui="tab-arror"。如下
示例 3：iframe 选项卡
这就是易迅主页左侧的“各种价值观”。 向 title 元素添加 data-iframe 属性
选项卡API
以jQuery插件的形式实现，配置参数如下
10
11
12
13
14
/**
* 选项卡组件
* $(x).tab({
* auto: // @boolean 是否手动切换，默认 false
* evtType: // @string 默认mouseover，鼠标连接到前面时切换，可选click
* currCls: // @string 默认 curr
* nav: // @string tab的css属性选择器的key，默认为tab-nav
* content: // @string tab内容的css属性选择器的key，默认为tab-content
* arrow: // @string tab-arrow 切换时动态连接效果
* Stay: // @number 自动切换的时间间隔
* defIndex: // @number 默认显示的选项卡，
* isFade: // @boolean 默认 false
* })
*/
当HTML属性形式的配置不能满足要求时，可以直接调用。 还添加了一个“更改”事件，每当切换选项卡时都会触发该事件。
10
11
12
13
14
$elem.tab({
事件类型：事件类型，
currCls: currCls,
自动：自动，
停留：停留，
导航： 导航，
内容：骗局，
defIndex：当前
})
// 选项卡更改事件
$元素。 绑定（'更改'javascript 选项卡，函数（ev，idx，$ nav，$内容）{
//去做
})
借助storm机制，可以轻松实现Ajax Tab，在切换时添加change事件，并在事件处理函数内部执行Ajax请求来更新tab内容。
有关的：
