jquery tab插件
直接贴上代码
CSS：
View Code
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;}
JQUERY：
View Code
/* <![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：
View Code
$(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" }) });
页面代码：
View Code
<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>
