jQuery Plugins Code:(function ($) { // 插件名稱 tab $.fn.tab = function (options) { // 默認值初始化 var defaults = { // 默認起始選項 index: 0, // 默認延遲時間 delay: 100, // 默認鼠標懸停 act: '' }; // 合併 defaults 和 options 修改並返回 defaults var set = $.extend(defaults, options); // this 指經過當前選擇器獲取的 jQuery 對象 // 選項卡標籤 var tag = $('ul.tags > li', this); // 選項卡內容 var pane = $('div.panes > div', this); /* tagcur */ var tagcur = $('div.tagsline > div', this); tagcur.width(tag.eq(set.index).width()); tagcur.css('left', tag.eq(set.index).position().left); /* end */ // 默認添加起始元素類名 tag.eq(set.index).addClass('cur'); // 默認顯示起始元素隱藏同輩元素 pane.eq(set.index).show().siblings().hide(); // 選項卡切換函數 function fnTab(obj) { /* tagcur */ tagcur.animate({ width: obj.width(), left: obj.position().left }, 200); /* end */ // 添加當前元素類名刪除同輩元素類名 obj.addClass('cur').siblings().removeClass('cur'); // 顯示當前元素隱藏同輩元素 pane.eq(obj.index()).show().siblings().hide(); }; // 判斷鼠標單擊事件 if (set.act == 'click') { // 鼠標單擊事件 tag.click(function (e) { var this_tag = $(this); // 調用選項卡切換函數 fnTab(this_tag); return false; }); } else { var hoverTimer; // 鼠標懸停事件 tag.hover(function (e) { var this_tag = $(this); // 指定毫秒數後調用選項卡切換函數 hoverTimer = setTimeout(function (e) { fnTab(this_tag); }, set.delay); }, function (e) { // 取消延遲執行選項卡切換函數 clearTimeout(hoverTimer); }); } } })(jQuery); jQuery Code:$(function ($) { $("#tab").tab({ index: 1, // 設置起始選項,默認爲第一項 delay: 200, // 設置延遲時間,默認爲延遲 100 毫秒 act: "click" // 設置鼠標事件,默認爲鼠標懸停 }); });