jq選項卡滑鼠延遲的插件實例_jquery

複製程式碼 程式碼如下:

BR>         "http://www.w3.org/TR/html4/loose.dtd"> ;
 
 
 
 
    
 
     *{margin: 0;padding: 0}
     .tab{width: 350px;margin: 100px auto;}
   ;margin: 100px auto;}
    . 80px；邊框：1px 實心#ccc；邊框半徑：5px；右邊距：5px；高度：24px；行高：24px；文字對齊：居中；}
     .tabnav li.cur{背景：#daa520}     .tabcontent{顯示：無；填入：20px;}
.tabcon{邊框：1px #708090 實心；背景：#ffc0cb；高度：300px；清楚：兩者；}
 
🎜> 
 <script><BR> (function($){<BR>         $.fn.extend({<BR>                 var confings={<BR>                     tabNav:'',//tab導覽名稱<BR>                            tabCon:'',//標籤內容名稱<BR>          其他類別名稱<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>

• 菜单一


• 菜单二


• 菜单三

 

 

Content one

Content 2

                                                                                                                                           div style="clear: both;margin-top: 60px;"> ">
" /li>
                                                                              ;Menu 3
                                  

Content 1

                                                                                                                                                       ">Content three

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn