直接貼上代碼

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", //切換控制器的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"})});

頁面代碼：

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>

轉載于:https://www.cnblogs.com/ruanyifeng/archive/2012/08/01/2617791.html

總結

以上是生活随笔為你收集整理的jquery tab插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。