집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 고전적인 페이드 인 및 페이드 아웃 탭 효과를 구현합니다.

jquery는 고전적인 페이드 인 및 페이드 아웃 탭 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:38:221355검색

이 문서의 예에서는 기존 페이드인 및 페이드아웃 탭 효과 코드의 jquery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jquery 플러그인으로 구현된 페이드인 및 페이드아웃 효과가 있는 클래식 탭 코드입니다. 인터페이스가 미화되지 않았으면 좋겠습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>经典选项卡</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}
.tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;}
.tab dt strong{padding:0 15px;color:#444;}
.tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;}
.tab dt a.on{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;border-right:1px solid #ccc;border-left:1px solid #ccc;}
.tab dd{padding:10px;height:200px;clear:both;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
 var tabTitle = ".tab dl dt a";
 var tabContent = ".tab dl ul";
 $(tabTitle + ":first").addClass("on");
 $(tabContent).not(":first").hide();
 $(tabTitle).unbind("click").bind("click", function(){
  $(this).siblings("a").removeClass("on").end().addClass("on");
  var index = $(tabTitle).index( $(this) );
  $(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn("slow");
 });
});
</script>
<div class="tab">
 <dl>
  <dt><strong>经典选项卡</strong><a>手机卖场</a><a>脚本之家</a><a>海澜男人</a><a>精品居家</a></dt>
  <dd>
  <ul>1111111111111111111111</ul>
  <ul>22222222222222222</ul>
  <ul>333333333333333333333</ul>
  <ul>444444444444444444</ul>
 </dd>
 </dl>
</div>
</body>
</html>

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：Javascript로 구현된 간단한 마우스 오른쪽 버튼 클릭 메뉴 클래스다음 기사：Javascript로 구현된 간단한 마우스 오른쪽 버튼 클릭 메뉴 클래스

jquery는 고전적인 페이드 인 및 페이드 아웃 탭 효과를 구현합니다.

관련 기사