很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集成一栏，然后用选项卡的方式展现出来，节省空间，方便访问者浏览。于是就想到要自己写个 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();
    });
});

如果第一项后面有很多项，而你只想实现三个选项卡，那

$('.tab_content:gt(0)')

这里就要改一下。
转自http://www.alanoy.com/jquery-tab/