TAB（选项卡）效果是网页中常见的页面效果 实现它也有N种方式，在给大家推荐一款 基于jQuery 的TAB插件
其特色是可以较为自由的设置各种选项，达到自己需要的效果。样式没有写，只写了够实现功能的，至于美好就自己去写CSS去美化一下好了。
主要功能：
实现选项卡切换
内置五种切换方式 可以通过参数设置来设定
可以选择触发方式 是点击还是划过
是否自动切换
点击查看DEMO
点击下载JS（备用下载）
使用方式：

$("#testtab").tab({
   tabId:"#tabtag", //切换控制器的ID
   tabTag:"li",  //切换控制器标签
   conId:"#tabcon", //内容容器ID
   conTag:"div",  //容器标签
   act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
   effact: "scrolly" //效果为纵向滚动 ， scrollx： 横向滚动 ， "slow" ： slow效果
   auto:true, //自动滚动，默认false
   dft:2 //设置起始显示序列
   })

DOM 结构：

<div class="testtab" id="testtab">
        <div id="tabtag" class="tabtag" style="position:relative;">
            <ul>
                <li class="cur">项目一</li>
                <li>项目二</li>
                <li>项目三</li>
                <li>项目四</li>
            </ul>
        </div>
        <div id="tabcon" class="tabcon">
            <div>
                <ul>
                    <li><a href="#nogo">内容一</a></li>
                    <li><a href="#nogo">内容一</a></li>
                    <li><a href="#nogo">内容一</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#nogo">内容二</a></li>
                    <li><a href="#nogo">内容二</a></li>
                    <li><a href="#nogo">内容二</a></li>                
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#nogo">内容三</a></li>
                    <li><a href="#nogo">内容三</a></li>
                    <li><a href="#nogo">内容三</a></li>                   
                </ul>
                         
            </div>
            <div>
                <ul>
                    <li><a href="#nogo">内容四</a></li>
                    <li><a href="#nogo">内容四</a></li>
                    <li><a href="#nogo">内容四</a></li>                 
                </ul>
            </div>
        </div>
    </div>

实例：

$("#testtab").tab({
    tabId:"#tabtag", //切换控制器的ID
    tabTag:"li",  //切换控制器标签
    conId:"#tabcon", //内容容器ID
    conTag:"div",  //容器标签
    act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
    effact: "scrolly" //效果为纵向滚动
    dft:0
    })

插件代码：

function cur(ele,currentClass,tag){ //标记当前函数
        ele= $(ele)? $(ele):ele;
        if(!tag){
            ele.addClass(currentClass).siblings().removeClass(currentClass);
            }else{
                ele.addClass(currentClass).siblings(tag).removeClass(currentClass);
                }
        }
    $.fn.tab=function(options){ //插件开始
    var org={ //原始设置
        tabId:    "",
        tabTag:   "",
        conId:    "",
        conTag:   "",
        curClass: "cur",
        act:      "click",
        dft:      0,
        effact:   null,
        auto:     false,
        autotime: 3000,
        aniSpeed: 500
        }   
                  
    $.extend(org,options); //合并自定义设置
              
    var t=false; //自动开始定时器
    var k=0; //切换序列 默认为0
    var _this=$(this); //取得当前元素
    var tagwrp=$(org.tabId); //切换控制器容器
    var conwrp=$(org.conId); //切换控制器标签
    var tag=tagwrp.find(org.tabTag); //切换容器的容器
    var con=conwrp.find(org.conTag); //切换内容的容器   
    var len=tag.length; //有多少个项目
    var taght=parseInt(tagwrp.css("height")); //得到控制器高度
    var conwh=conwrp.get(0).offsetWidth; //得到控制器宽度
    var conht=conwrp.get(0).offsetHeight; //以及高度
    var curtag=tag.eq(org.dft); //初始控制器标签
    //初始化tab
    cur(curtag,org.curClass); //标记默认序列
    con.eq(org.dft).show().siblings(org.conTag).hide(); //显示默认项目
              
    if(org.effact=="scrollx"){ //如果使用 横向滚动 则准备CSS 条件
        var padding=parseInt(con.css("padding-left"))+parseInt(con.css("padding-right"));                                       
        _this.css({
                  "position"   :"relative",
                  "height"     :taght+conht+"px",
                  "overflow"   :"hidden"
                  });               
                  
        conwrp.css({
                   "width"     :len*conwh+"px",
                   "height"    :conht+"px",
                   "position"  :"absolute",
                   "top"       :taght+"px"
                   });
                  
        con.css({
                "float"        :"left",
                "width"        :conwh-padding+"px",
                "display"      :"block"
                });
        }
                  
    if(org.effact=="scrolly"){ //如果使用 纵向滚动 则准备CSS 条件
        var padding=parseInt(con.css("padding-top"))+parseInt(con.css("padding-bottom"));                                       
        _this.css({
                  "position"   :"relative",
                  "height"     :taght+conht+"px",
                  "overflow"   :"hidden"
                  });
        tagwrp.css({
                   "z-index"   :100
                   })       
        conwrp.css({
                   "width"     :"100%",
                   "height"    :len*conht+"px",
                   "position"  :"absolute",
                   "z-index"   :99                                                
                   })       
        con.css({
                "height"       :conht-padding+"px",
                "float"        :"none",                                           
                "display"      :"block"
                });
        }   
              
    tag.css({"cursor":"pointer"}) //切换控制标签用手性鼠标
        .each(function(i){ //循环切换
        tag.eq(i).bind(org.act,function(){ //绑定到鼠标动作
                cur(this,org.curClass);    //标记当前
                k=i; //传递序列
                switch(org.effact){ //根据设定的切换效果去转换切换方式                   
                    case "slow"    : con.eq(i).show("slow").siblings(org.conTag).hide("slow"); //slow 效果
                    break;
                    case "fast"    : con.eq(i).show("fast").siblings(org.conTag).hide("fast"); //fast 效果
                    break;
                    case "scrollx" : conwrp.animate({left:-i*conwh+"px"},org.aniSpeed); //横向滚动效果
                    break;
                    case "scrolly" : conwrp.animate({top:-i*conht+taght+"px"},org.aniSpeed); //纵向滚动效果
                    break;
                    default        : con.eq(i).show().siblings(org.conTag).hide(); //默认切换
                    break;
                    //End of switch
                    }           
                }       
            )                                     
        })   
              
    if(org.auto){     //自动切换   
        var drive=function(){
            if(org.act=="mouseover"){
                tag.eq(k).mouseover();
                }else if(org.act=="click"){
                tag.eq(k).click();
                }           
            k++;           
            if(k==len) k=0;           
            }
        t=setInterval(drive,org.autotime);   
        }       
    //End of $.fn.tab

Via：http://mengqing.org/archives/jquery-tab-support-auto-play.html