<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>JQ选项卡</title> <style> #div1 div, #div2 div, #div3 div, #div4 div { width: 200px; height: 200px; border: 1px #000 solid; display: none; } .active { background: red; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="div1"> <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"> <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="div3"> <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="div4"> <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> <input type="button" value="点击" id="input1"> </body> <script type="text/javascript"> /** title : 基于JQ的选项卡组件 Options : event delay Methods : nowSel() getContent() Events : beforeClick afterClick **/ //jQ中的主动触发 : trigger() $(function() { var t1 = new Tab(); t1.init(‘div1‘); var t2 = new Tab(); t2.init(‘div2‘, { event: ‘mouseover‘ }); var t3 = new Tab(); t3.init(‘div3‘, { event: ‘mouseover‘, delay: 200 }); var t4 = new Tab(); t4.init(‘div4‘); t4.nowSel(2); $(‘#input1‘).click(function() { alert(t4.getContent()); }); $(t4).on(‘beforeClick‘, function() { alert(t4.getContent()); }); $(t4).on(‘afterClick‘, function() { alert(t4.getContent()); }); }); function Tab() { this.oParent = null; this.oInput = null; this.oDiv = null; this.isNow = 0; this.settings = { //默认参数 event: "click", delay: 0 }; }; Tab.prototype.init = function(oParent, opt) { $.extend(true, 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 time = null; this.aInput.on(this.settings.event, function() { var _this = this; if(This.settings.event == "mouseover" && This.settings.delay) { time = setTimeout(function() { show(_this); }, This.settings.delay); } else { show(_this); } }).mouseout(function() { clearTimeout(time); }); function show(obj) { $(This).trigger("beforeClick"); This.aInput.attr("class", ""); This.aDiv.css("display", "none"); $(obj).attr("class", "active"); This.aDiv.eq($(obj).index()).css("display", "block"); This.iNow = $(obj).index(); $(This).trigger("afterClick"); }; }; Tab.prototype.nowSel = function(index) { this.aInput.attr(‘class‘, ‘‘); this.aDiv.css(‘display‘, ‘none‘); this.aInput.eq(index).attr(‘class‘, ‘active‘); this.aDiv.eq(index).css(‘display‘, ‘block‘); this.iNow = index; }; Tab.prototype.getContent = function() { return this.aDiv.eq(this.iNow).html(); }; </script> </html>
