<div class="codetitle"> <span><a style="CURSOR: pointer" data="58509" class="copybut" id="copybut58509" onclick="doCopy('code58509')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code58509"> <br>BR> "http://www.w3.org/TR/html4/loose.dtd"> ;<br> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <script type="text/ javascript" src="js/jquery-1.7.min.js"> <head><BR> <title>选项卡插件制作</title><BR> < style type="text/css"><BR> *{margin: 0;padding: 0}<BR> .tab{width: 350px;margin: 100px auto;}<BR> .tabnav li{ list-style:无；光标：指针；浮动：左；宽度：80px；边框：1px 实心#ccc；边框半径：5px；右边距：5px；高度：24px；行高：24px；文本对齐：居中；}<BR> .tabnav li.cur{背景：#daa520;}<BR> .tabcontent{显示：无；填充：20px;}<BR> .tabcon{边框：1px #708090 实心；背景：#ffc0cb；高度：300px；清晰：两者；}<BR> <BR> <BR> <script><BR> (function($){<BR> $.fn.extend({<BR> myTab:function(options){<BR> var confings={<BR> tabNav:'',//tab导航名称<BR> tabTag :'',//标签导航标签<BR> tabCon:'',//标签内容名称<BR> conTag:'',//标签内容标签及其他类名<BR> 方法: '点击'//鼠标事件状态<BR> };//默认设置<BR> options= $.extend(confings,options);<BR> var that=$(this);<BR> var tagnav=$(confings.tabNav);<BR> var tabLi=tagnav.find(confings.tabTag);<BR> var tabcon=$(confings.tabCon);<BR> var tabUl=tabcon.find(confings.conTag);<BR> var timoutid=null;<BR> tabLi.each(function(ind){<BR> $(this).bind(options.method,function(){<BR> var liNode = $(this);<BR> timoutid = setTimeout(function(){ //鼠标不小心划过的延迟时间<BR> tabUl.hide();<BR> tabLi.removeClass("cur");<BR> tabUl.eq(ind).show();<BR> liNode.addClass("cur");<BR> },300);<BR> }).mouseout(function(){<BR> clearTimeout(timoutid);<BR> });<br><br> })<BR> return this;<BR> }<BR> })<br><br> })(jQuery);<BR> $(function(){<br><br> $("#testtab5").myTab({<BR> tabNav:"#tabtag5",tabTag:"li",tabCon:"#tabcon5",conTag:".tabcontent",method:"mouseover"<BR> });<BR> $("#testtab").myTab({<BR> tabNav:"#tabtag",tabTag:"li",tabCon:"#tabcon",conTag:".tabcontent"<BR> });<br><br> })<BR> </script><BR> <body><BR> <div class="tab" id="testtab5"><BR> <div class="tabnav" id="tabtag5"><BR> <ul><BR> <li class="cur">菜单一</li><BR> <li>菜单二</li><BR> <li>菜单三</li><BR> </ul><BR> </div><BR> <div class="tabcon" id="tabcon5"><BR> <div class="tabcontent" style="display: block;">内容一</div><BR> <div class="tabcontent">内容二</div><BR> <div class="tabcontent">内容三</div><BR> </div><BR> <div style="clear: both;margin-top: 60px;"><BR> <div class="tab" id="testtab"><BR> <div class="tabnav" id="tabtag"><BR> <ul><BR> <li class="cur">菜单一</li><BR> <li>菜单二</li><BR> <li>菜单三</li><BR> </ul><BR> </div><BR> <div class="tabcon" id="tabcon"><BR> <div class="tabcontent" style="display: block;">内容一</div><BR> <div class="tabcontent">内容二</div><BR> <div class="tabcontent">内容三</div><BR> </div><BR> </div><BR> </div><BR> </div><BR> </body><BR> </html><BR></script> </div>
