很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集成一栏，然后用选项卡的方式展现出来，节省空间，方便访问者浏览。于是就想到要自己写个 jQuery 代码来实现。
HTML 和 CSS 代码这里略过，可以查看 Demo。jQuery 代码如下：
jQuery(function($) {
//给当前要显示的标题添加类 selected，然后在它后面插入其他项的标题。
$('.tab_fst h2').addClass('selected').after($('.tab_sec h2'), $('.tab_trd h2'));
//把其他选项的内容插到第一个选项的内容的后面并隐藏。
$('.tab_content:gt(0)').insertAfter('.tab_content:eq(0)').hide();
//上面代码执行后，会留下两个空的 div，用 .remove() 方法删掉。
$('.tab_sec, .tab_trd').remove();
//首先给选项卡的标题增加类 title，以便我们修改美化标题栏的样式；
//然后添加点击每个标题的效果。
$('.tab_fst h2').addClass('title').click(function() {
//给被点击的标题添加类 selected，并移除其他标题项的 selected 类。
$(this).addClass('selected').siblings().removeClass('selected');
//因为每个标题 h2 对应着相应的内容 tab_content，所以用变量 i 获取 h2 的索引
var i = $('.tab_fst h2').index(this);
//让被点击选项的内容显示，隐藏其他项。
$('.tab_content').eq(i).fadeIn('slow').siblings(".tab_content").hide();
});
});
//给当前要显示的标题添加类 selected，然后在它后面插入其他项的标题。
$('.tab_fst h2').addClass('selected').after($('.tab_sec h2'), $('.tab_trd h2'));
//把其他选项的内容插到第一个选项的内容的后面并隐藏。
$('.tab_content:gt(0)').insertAfter('.tab_content:eq(0)').hide();
//上面代码执行后，会留下两个空的 div，用 .remove() 方法删掉。
$('.tab_sec, .tab_trd').remove();
//首先给选项卡的标题增加类 title，以便我们修改美化标题栏的样式；
//然后添加点击每个标题的效果。
$('.tab_fst h2').addClass('title').click(function() {
//给被点击的标题添加类 selected，并移除其他标题项的 selected 类。
$(this).addClass('selected').siblings().removeClass('selected');
//因为每个标题 h2 对应着相应的内容 tab_content，所以用变量 i 获取 h2 的索引
var i = $('.tab_fst h2').index(this);
//让被点击选项的内容显示，隐藏其他项。
$('.tab_content').eq(i).fadeIn('slow').siblings(".tab_content").hide();
});
});
如果第一项后面有很多项，而你只想实现三个选项卡，那 $('.tab_content:gt(0)') 这里就要改一下。
2010-10-1 更新：写的 CSS 有点问题，导致 IE8 下有 Bug，已修复。
Chrome下预览为火星文
@Yafei: 囧，编码问题，ok 了。
<meta http-equiv="Content-Type" content="; charset=” />
这行直接输出了呢，导致没有编码，在Safari 浏览器下面也是显示为火星文，我说的是 demo
@1pondo: 哦，对哦，我复制错了。帮忙看看现在应该可以了吧？
@Alan: OK，现在好了
@1pondo: 谢了，一本道
@1pondo: 现在应该能看到邮件通知了，骚扰一下。哈哈。
@Alan:还是收不到，哈哈
@1pondo: 你看看垃圾邮件有没有，囧。我自己测试了是可以收到的
其实昨天我也写了个选项卡的js类，不过最后没用在自己博客上，因为我不太喜欢将本来想要给别人看的东西再故意隐藏起来。。。
@QiQiBoY: 其实个人也不太喜欢用选项卡，不过也可以根据需要使用吧，我是当练练手，呵呵。
PS，能帮忙看看能否收到邮件通知我回复你了？
@Alan: 我也没收到邮件通知
加在GWHITE3吧，我喜欢TABBER，这样可以缩减sidebar长度，挺好的~
@Bryan: 这个还是自己加好，未必每个人都喜欢的。
tab很方便，用更小的空间呈现更多的内容。
@Max Lee: 是的，很多地方都可以用到。我又要感叹 jQuery 的强大。
路过学习了~
jquery太强大，我也用了好几个jq插件了
@Dianso: 真的很强大，用原生 js 要多很多代码。
传说中的强大啊。不过我的博客风格不适合这种板式
@阿七: 还都是看个人喜好了
这个我还真没用，呵呵！
很受用的教程， 膜拜中。。
不知道贵博现在的主题能否共享呀 邮箱waterbby@163.com
@葡萄: 实在有太多个人东西了，不好分享啊。等以后我弄好了发布吧，不好意思了。
@Alan:
嗯，还是很期待哟
省空间“利器”
不错的代码，我收藏下来
当切换第二个之后，再点击第一个时候第一个的内容不出现了。这是为什么呢？
@酷剑: 你是什么浏览器？我测试过了，没这个问题
嗯。是世界之窗。也是ie内核的。 点击第三个之后，再点击第二个里面的内容就会出现，但是第一个点击之后依旧看不到。
@酷剑: 搞定了，CSS没写好的问题
@Alan: 嗯。看到了。强。你的博客很漂亮，顺祝国庆快乐。呵呵