> 웹 프론트엔드 > JS 튜토리얼 > jq 탭 마우스 지연 플러그인 example_jquery

jq 탭 마우스 지연 플러그인 example_jquery

WBOY
풀어 주다: 2016-05-16 17:34:01
원래의
828명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿