选项卡（Tab）起初似乎是做为控件被封装到图形用户界面元素中的一个组件，在应用程序中选项卡式界面可以大大的节省界面空间进而使一组类似的功能选项变的井井有条，目前主流的各种网页浏览器均已采用选项卡式页面浏览另外还有被微软大量运用在新版办公软件（Office）及操作系统（Windows）中的 Ribbon 控件核心也是选项卡式的设计，当然在网页中使用选项卡的例子更为常见如淘宝（TaoBao）的搜索框及右边栏就大量使用了选项卡式结构从而节省了近三倍页面空间，所以对于选项卡式网页的制作也是我们最基本需要掌握的…
一、结构层（Structure）：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下：
//首先是多数站点采用的写法：
标题一标题二标题三
内容一
内容二
内容三
//如果用户禁用 CSS JS 内容将失去相关性及联系性
//然后我自己比较推荐的写法：
- 标题一
- 内容一
- 标题二
- 内容二
- 标题三
- 内容三
//对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性
二、表现层（Presentation）：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下：
.itab { }
.itab dl { margin:0; padding:0; }
.itab dt { float:left; padding:5px; cursor:pointer; }
.itab dt.active { }
.itab dd {/* display:none; */} /* 这个隐藏也建议由 JS 来实现如果客户端仅禁用 JS 却支持 CSS 的情况下不影响 */
.itab .tabBody { clear:both; }
三、行为层（Behavior）：最后当然是起重要作用的行为层了，主要对用户的一些操作如点击划过等触发一些事件从而改变现有的结构层代码达到选项卡的目的，具体代码如下：
$('.itab dd').hide(); //这里可以交给 CSS 隐藏但那样支持 CSS 不支持 JS 的客户端就郁闷了；
$('.itab').append('');
$('.itab dt').click(function(){
$('.itab .active').removeClass('active');
$(this).addClass('active'); //用于辅助 css 修饰的 class 可区分哪个是当前点击的标题；
$('.itab .tabBody').empty().append($(this).next().clone());
}).eq(0).click();
我这里偷懒用了 jQuery 首先是隐藏掉原来已经有的各个内容 dd 然后为整个选项卡 itab 最后添加了一个名为 tabBody 的容器用来存放要展示的内容，接着就可以为标题绑定事件了这里选了点击（click）当然你可以可以使用划过（hover）等等，当鼠标点击标题 dt 的时候先清空容器 tabBody 的内容，然后将当前被点击的标题 dt 下面的内容 dd 克隆一份放置到容器 tabBody 中，过程非常简单，另外用于操作 class 的两句是为了方便 CSS 修饰当前被激活的标题。
这样结构的选项卡其优点是很明显的，可以很清楚的告诉搜索引擎和关闭 CSS JS 的客户端你的内容结构层次，当然代码上特别是 JS 代码上会稍显复杂但这样的成本我个人认为是非常值得的，也有人会说现在哪还有不支持 CSS 和 JS 的客户端呢，其实我很多时候也有过这样的想法，但好在当我看到自己的项目在一些掌上浏览器的浏览效果的时候及时否定了自己的想法……