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; width: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; width: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;}

/* <![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
})
/* ]]> */    

$(document).ready(function () {//1. 垂直滚动 点击触发
$("#testtab").tab({tabId: "#tabtag", //切换控制器的IDtabTag: "li", //切换控制器标签conId: "#tabcon", //内容容器IDconTag: "div", //容器标签act: "click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过effact: "scrollx", //横向滚动效果dft: 2 //设置起始显示序列
            })//2.水平滚动 点击触发 设置起始显示序列
 $("#testtab2").tab({tabId:"#tabtag2", //切换控制器的IDtabTag:"li", //切换控制器标签conId:"#tabcon2", //内容容器IDconTag:"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>