1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 8 <style type="text/css"> 9 #div1 div, 10 #div2 div, 11 #div3 div { 12 width: 200px; 13 height: 200px; 14 border: 1px solid #000000; 15 display: none; 16 } 17 18 input { 19 border: none; 20 outline: none; 21 background: yellowgreen; 22 } 23 24 .active { 25 background: pink; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div id="div1"> 32 <input type="button" class="active" value="1" /> 33 <input type="button" value="2" /> 34 <input type="button" value="3" /> 35 <div style="display: block;">1111111</div> 36 <div>2222222</div> 37 <div>3333333</div> 38 </div> 39 <div id="div2"> 40 <input type="button" class="active" value="1" /> 41 <input type="button" value="2" /> 42 <input type="button" value="3" /> 43 <div style="display: block;">1111111</div> 44 <div>2222222</div> 45 <div>3333333</div> 46 </div> 47 <div id="div3"> 48 <input type="button" class="active" value="1" /> 49 <input type="button" value="2" /> 50 <input type="button" value="3" /> 51 <div style="display: block;">1111111</div> 52 <div>2222222</div> 53 <div>3333333</div> 54 </div> 55 <script type="text/javascript"> 56 /** 57 * title: 基于jq选项卡组件 58 * options：events deplay 59 */ 60 $(function() { 61 var t1 = new Tab() 62 t1.init("div1", {}) 63 var t2 = new Tab() 64 t2.init("div2", { //配置参数 65 event: "mouseover" 66 67 }) 68 var t3 = new Tab() 69 t3.init("div3", { //配置参数 70 event: "mouseover", 71 delay: 200 72 }) 73 }); 74 75 function Tab() { 76 this.oparent = null; 77 this.ainput = null; 78 this.div = null; 79 this.settings = { //默认参数 80 event: "click", 81 delay: 0 82 } 83 } 84 Tab.prototype.init = function(oparent, opt) { 85 $.extend(this.settings, opt); //复制 86 this.oparent = $("#" + oparent); 87 this.ainput = this.oparent.find("input"); 88 this.div = this.oparent.find("div"); 89 this.change(); //选项卡改变事件 90 }; 91 92 Tab.prototype.change = function() { 93 var This = this; //改变this指向 很重要 94 var timer = null; 95 this.ainput.on(this.settings.event, function() { 96 var _this = this; 97 if(This.settings.event = "mouseover" && This.settings.delay) { 98 timer = setTimeout(function() { 99 show(_this) 100 }, This.settings.delay); 101 } else { 102 show(this); 103 } 104 }).mouseout(function() { 105 clearTimeout(timer); 106 }); 107 108 function show(obj) { 109 This.ainput.attr("class", ""); 110 This.div.css("display", "none"); 111 $(obj).attr("class", "active"); //封装后 $(this)--->$(obj) 112 This.div.eq($(obj).index()).css("display", "block"); 113 } 114 115 } 116 </script> 117 </body> 118 119 </html>