jq tab mouse delay plug-in example_jquery

Copy code The code is as follows:

         "http://www.w3.org/TR/html4/loose.dtd">
 
 
 
 
    
 
 
 <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>                      method: 'click'//鼠标事件状态<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

div style="clear: Both;margin-top: 60px;"> ">
/li>
;メニュー 3＆lt; div class = "tabcontent" style = "display：block;"＆gt; content 1＆lt;/div＆gt;
"＆gt; content 3＆lt;/div＆gt; ;/html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn