<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <script src="../lib/jquery-2.1.4.min.js"></script> <script src="app/chosetab.js"></script> </head> <style> #div1 div,#div2 div,#div3 div,#div4 div{ width:200px; height:200px; border:1px #000 solid; display:none;} .active{ background:red;} </style> <body> <div id="div1" class="div1 test"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block">111111</div> <div>222222</div> <div>333333</div> </div> <div id="div2" class="div2 test"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block">111111</div> <div>222222</div> <div>333333</div> </div> <script> $(function () { var t1 = new Tab(); t1.init('.div1',{}); var t2 = new Tab(); t2.init('.div2',{ event:'mouseover', delay:100, }); }) </script> </body> </html>
;(function ($, window, document, undefined) { function Tab() {//初始化配置 this.oParent = null; this.aInput = null; this.aDiv = null; this.iNow = 0; this.settings = { //默认参数 event: 'click', delay: 0 }; } Tab.prototype.init = function (oParent, opt) {//合并配置，调用逻辑处理函数 $.extend(this.settings, opt); this.oParent = $( oParent); this.aInput = this.oParent.find('input'); this.aDiv = this.oParent.find('div'); this.change(); }; Tab.prototype.change = function () {//逻辑处理函数 var This = this; var timer = null; This.aInput.on(This.settings.event, function () { var _this = this; if (This.settings.event == 'mouseover' && This.settings.delay) { timer = setTimeout(function () { show(_this); }, This.settings.delay); } else { show(_this); } }).mouseout(function () { clearInterval(timer); }) function show(obj) {//逻辑处理函数主体 This.aInput.attr('class', ''); This.aDiv.css('display', 'none'); $(obj).attr('class', 'active'); This.aDiv.eq($(obj).index()).css('display', 'block'); } } window.Tab = Tab; })(jQuery, window, document);