jq选项卡鼠标延迟的插件实例_jquery

复制代码 代码如下:

BR>         "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>
 
 

    

        

            
• 菜单一

            
• 菜单二

            
• 菜单三

        

    

    

        

内容一

        

内容二

        

内容三

    

    

        

            

                

                    
• 菜单一

                    
• 菜单二

                    
• 菜单三

                

            

            

                

内容一

                

内容二

                

内容三