효과 그림: 동적 효과 TAB 탭 jquery 플러그인 코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다. 제목 없는 문서 <br>$(function() { <br>zeng. tab .init() <br>}) <br></head> <br><div class="clearfix" id="hot " > <br><div class="main_l tab"> <br><div class="main_titleclearfix"> <br><ul class="fx"> <br><li class ="on"><a href="#">당신은 여자입니다</a></li> <br><li class="">나는 남자입니다</li> > </ul> <br></div> <br><div class="t"> <br><div class="main_contentclearfix"> <br>< ;/div> <br></div> <br><div class="t none"> <br><br>헤헤<br></ div> <br></div> <br></body> 🎜> <br>스타일: <br><br><br><br><br>코드 복사 <br><br> </div> 코드는 다음과 같습니다. <br><br> <div class="codetitle">@charset "utf-8"; <span>/* CSS 문서 */ <a style="CURSOR: pointer" data="85837" class="copybut" id="copybut85837" onclick="doCopy('code85837')">#hot { <u>높이: 565px; </u>오버플로: 숨겨진; </a>} </span>디스플레이: block; </div>} <div class="codebody" id="code85837">.clearfix::after { <br>content: "."; <br>display: block; <br>clear: 둘 다 <br> 숨겨진; <br>} <br>ul { <br>목록 스타일: 없음 <br>} <br>body { <br>줄 높이: <br>} <br>a, :link, a:visited { <br>색상: #333333; <br>텍스트 장식: 없음 <br>} <br>a:hover { <br>색상: #FF6600 <br>텍스트 장식: 없음; <br>} <br>.main { <br>패딩: 0 10px 0 167px; <br>위치: 상대 <br>폭: 823px; : 왼쪽; <br>위치: 상대; <br>} <br>.main_r { <br>위치: 상대; <br>} <br>.main_title { <br>배경: url("images/s.png") 반복 없음 스크롤 0 0 transparent; <br>float: 왼쪽; <br>높이: 28px; 숨겨진; <br>} <br>.main_title ul { <br>글꼴 크기: 14px; <br>} <br>.main_title ul li { <br>배경: 없음 반복 스크롤 0 0 #F1F1F1; 테두리 왼쪽: 1px 솔리드 # FFFFFF; 테두리 오른쪽: 1px 솔리드 #FFFFFF; <br> 테두리 상단: 3px 솔리드 #FFFFFF; <br> 높이: 23px; line-height: 23px; <br>padding-left: 16px; <br>padding-top: 1px; <br>.main_title ul .on { <br> : 없음 반복 스크롤 0 0 # FFFFFF; <br>border-style: solid; <br>height: 22px; <br>줄 높이: 22px; <br>왼쪽 패딩: 16px; <br>오른쪽 패딩: 16px; <br>} <br>.main_title ul .on { <br> 700; <br>} <br> .main_title 범위 { <br>float: right; <br>line-height: 24px; <br>padding-right: 10px; } <br>.main_l .main_title { <br>오버플로: 숨김; <br>너비: 513px; <br>} <br>.main_l .main_content { <br>너비: 513px>} <br> tab div.t.none { <br>디스플레이: 없음; <br>} <br>.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li { <br>배경색: 투명; <br>} <br>.tab .main_title ul.fx li, .tab .main_title ul.fx li.on { <br>border-top: 0 none <br>margin-top: -8px; 패딩 상단: 0; <br> } <br>.tab .main_title ul.fx li.on { <br>테두리 하단 너비: 0 <br>테두리 왼쪽 색상: 투명; -오른쪽 색상: <br>} <br>.tab .main_title ul.fx { <br>위치: 상대 <br>z-색인: 20 <br>} <br>.tab .main_title div .animate { <br>배경 색상: #FFFFFF; <br>테두리 색상: #009AD9 #009AD9 #FFFFFF; <br>테두리 스타일: <br>테두리 너비: 4px 1px 1px; 높이: 23px; <br>위치: 절대 <br>상단: 0 <br>} <br><br><br>탭选项卡 源代码: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="63811" class="copybut" id="copybut63811" onclick="doCopy('code63811')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code63811"> <br>/* <br>* 탭 1.0 <br>* 날짜: 2011-07-09 15:29 <br>* http://zengxiangzhan.cnblogs.com/ <br>*/ <br>var zeng = zeng || {}; <br>zeng.tab = { <br>t: null, <br>delayTime: 150, <br>fx: true, <br>tab: function(b) { <br>$(b).siblings() .removeClass("on"); <br>$(b).addClass("on"); <br>var c = $(b).parents(".tab").find("div.t"); <br>var a = c.eq($(b).index()); <br>c.addClass("없음"); <br>a.removeClass("none"); <br>if (this.fx) { <br>if ($(b).parent().hasClass("nofx")) { <br>return <br>} <br>$(b).parent( ).siblings(".animate").width($(b).outerWidth() - 2).animate({ <br>왼쪽: $(b).position().left <br>}, "느림" ) <br>} <br>}, <br>delayTab: function(b, a) { <br>clearTimeout(b.t); <br>this.t = setTimeout(function() { <br>b.tab(a) <br>}, this.delayTime) <br>}, <br>init: function() { <br>var a = 이; <br>a.animate(); <br>if (window.Touch) { <br>$(".tab .main_title>ul>li[class!='on']>a").click(function() { <br>false 반환 <br>}) <br>} <br>$(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() { <br>a.delayTab(a, this ) <br>}, function() { <br>clearTimeout(a.t) <br>}) <br>}, <br>animate: function() { <br>if (!this.fx) { <br> return <br>} <br>$(".tab .main_title>ul").each(function() { <br>if (!$(this).hasClass("nofx")) { <br>$( this).addClass("fx") <br>} <br>}); <br>$(".tab .main_title").each(function(a, b) { <br>if ($(this).find("ul").hasClass("nofx")) { <br> return <br>} <br>$(b).append("<div class='animate' ></div>") <br>$(b).find(".animate"); width($(b).find("ul>li.on").outerWidth() - 2).css("왼쪽", $(b).find("ul>li.on").position() .left) <br>}) <br>} <br>}; <br> </div> <br> <div class="copy">작가:曾祥展</div> </div>
