jq tab mouse delay plug-in example_jquery-JS Tutorial-php.cn

jq tab mouse delay plug-in example_jquery
WBOY
Release： 2016-05-16 17:34:01
Original
828 people have browsed it
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>