jqタブマウス遅延プラグインexample_jquery

コードをコピー コードは次のとおりです:

"http://www.w3.org/TR/html4/loose.dtd"> ;





< style type="text/css">
*{margin: 0;padding: 0}
.tab{width: 350px;margin: 100px auto;}
.tabnav li{ list-style:なし;カーソル:ポインタ;浮動小数点:左;幅:80ピクセル;ボーダー:1ピクセル実線#ccc;ボーダー半径:5ピクセル;マージン右:5ピクセル; height:24px;line-height:24px;text-align:center;}
.tabnav li.cur{background:#daa520;}
.tabcontent{display: none;padding: 20px;}
.tabcon{枠線: 1px #708090 無地;背景: #ffc0cb;高さ: 300px;クリア: 両方;}


<script><br> (function($){<br> $.fn.extend({<br> myTab:function(options){<br> var confings={<br> tabNav:'', //tab导名航<br> tabTag :'',//tab导航标签<br> tabCon:'',//tab 内容名<br> conTag:'',//tab 内容标签とその他の種類名<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 までご連絡ください。