jquery tab插件

直接贴上代码

CSS：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd{margin:0px;padding:0px; font-family:Arial, Helvetica, sans-serif;}

a{ color:#35679a; text-decoration:none;}

a:hover{ color:#c00; text-decoration:underline;}

img{ border:none;}

li{ list-style:none;}

body{ text-align:left; background:#505050; font-size:12px;}

.cont{ background:#080808; padding:8px; 840px;  margin:0 auto;}

.main{  background:#eee; padding:6px;}

h2{ font-size:16px; font-family:"黑体"; color:#35679a;; padding:4px 10px; margin:10px 0 16px; font-weight:100; border-bottom:2px solid #ccc;}

h3{ padding-left:50px; font-size:16px; color:#555;}

.testtab{ border:4px solid  #ccc; margin:10px 50px; }

.tabtag{ line-height:24px; height:24px; border-bottom:2px solid #ccc;}

.tabtag li{ float:left; 24%; text-align:center; background:#eee;}

.tabtag li.cur{ color:#900; background:#fff;}

.tabcon{ height:100px; overflow:hidden;}

.tabcon div{ height:80px; padding:10px; color:#900; font-size:14px;}

.tabcon li{ line-height:22px;}

pre{ color:#444;}

pre strong{ font-weight:900;}

JQUERY：

/* <![CDATA[ */
$(document).ready(function () {

    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;
        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);
        //prepare
        cur(curtag, org.curClass);
        con.eq(org.dft).show().siblings(org.conTag).hide();

        if (org.effact == "scrollx") {
            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") {
            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");
                        break;
                    case "fast": con.eq(i).show("fast").siblings(org.conTag).hide("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    
    }
    //Drive
})
/* ]]> */    

插件使用JQUERY：

$(document).ready(function () {
            //1. 垂直滚动 点击触发

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

            //2.水平滚动 点击触发 设置起始显示序列
 
  $("#testtab2").tab({
    tabId:"#tabtag2", //切换控制器的ID
    tabTag:"li", //切换控制器标签
    conId:"#tabcon2", //内容容器ID
    conTag:"div", //容器标签
    act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
    effact: "scrollx", //横向滚动效果
    dft:2 //设置起始显示序列
    })
    
  //3.无效果 自动切换
$("#testtab3").tab({
    tabId:"#tabtag3",
    tabTag:"li",
    conId:"#tabcon3",
    conTag:"div",
    auto:true,
    act:"mouseover"
    })

//4. "slow"效果
 $("#testtab4").tab({
    tabId:"#tabtag4",
    tabTag:"li",
    conId:"#tabcon4",
    conTag:"div",
    effact: "slow"
    })
        });

页面代码：

<div class="cont">
        <div class="main">
            <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>
                        <table width="100%">
                            <tr>
                            <td>adfaf</td><td>adfaf</td><td>adfaf</td><td>adfaf</td></tr>
                            <tr>
                            <td>adfaf</td><td>adfaf</td><td>adfaf</td><td>adfaf</td></tr>
                            <tr>
                            <td>adfaf</td><td>adfaf</td><td>adfaf</td><td>adfaf</td></tr>
                            <tr>
                            <td>adfaf</td><td>adfaf</td><td>adfaf</td><td>adfaf</td></tr>
                        </table>
                    </div>
                    <div>
                        <ul>
                            <li><a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li>
                            <li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li>
                            <li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li>
                            <li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul>
                    </div>
                    <div>
                        <ul>
                            <li><a href="#nogo">日本影星集合可爱清纯于一身</a></li>
                            <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">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span></li>
                            <li><a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span></li>
                            <li><a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span></li>
                            <li><a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>></li></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>