|
jquery_tab.js文件内容 //$.fn : 扩展插件的方法 (function($){ $.fn.tab = function(){ var This = this; $(this).find('input').click(function(){ $(This).find('input').attr('class',''); $(This).find('div').css('display','none'); $(this).attr('class','active'); $(This).find('div').eq($(this).index()).css('display','block'); }); }; })(jQuery); html文件内容 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>拖拽</title> <style> #div1 div{width: 200px; height: 200px; border: 1px #000 solid; display: none; position: absolute;} .active{background: red;} </style> <script type="text/javascript" src="http://code./jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery_tab.js"></script> <script> $(function(){ $('#div1').tab(); }); </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">1111</div> <div>2222</div> <div>3333</div> </div> </body> </html> |
|
|
来自： xibeifneg3 > 《IT-JS》
