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{ 목록 스타일: 없음;커서:포인터;플로트: 왼쪽;너비: 80px;테두리: 1px 솔리드 #ccc;테두리 반경: 5px;마진-오른쪽: 5px; height:24px;line-height: 24px;text-align: center;}
     .tabnav li.cur{배경:#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导航name称<br>                      tabTag :'',//tab导航标签<br>                     tabCon:'',//tab内容name称<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>
 
 

    

        

            
• 菜单一

            
• 菜单二

            
• 菜单三

        

    

 

 

콘텐츠 1

< ;div class="tabcontent">콘텐츠 2

                                                                                   이                                          ;메뉴 3< ;/li>
                                

콘텐츠 1

                                                                                                                                                ">계속 3개

< ;/html>