집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 애니메이션 효과가 포함된 웹페이지를 처음으로 열기 위한 TAB 전환 코드를 구현합니다._jquery

jquery는 애니메이션 효과가 포함된 웹페이지를 처음으로 열기 위한 TAB 전환 코드를 구현합니다._jquery

WBOY원래의: 2016-05-16 15:40:351359검색

이 기사의 예에서는 애니메이션 효과가 있는 웹 페이지를 처음으로 열기 위해 jquery가 TAB 전환 코드를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

처음 열 때 애니메이션 효과가 있는 웹페이지 TAB 코드입니다. 처음 TAB 메뉴를 클릭하면 애니메이션이 표시되고 다시 클릭하면 사라집니다. 필요한 경우 페이지 탭 효과를 다운로드하세요.

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

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

http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-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>网页TAB代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,div,ul,li{ margin:0; padding:0;}
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;}
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li.cur .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li div").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("div.d-bk").slideDown()
   },function(){
   $("div.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <div class="d-bk">111</div>
 </li>
 <li>
  导航2
 <div class="d-bk">222</div>
 </li>
 <li>
  导航3
 <div class="d-bk">333</div>
 </li>
</ul>
</body>
</html>

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

성명：

이전 기사：jquery는 아름다운 탐색 메뉴 마우스 프롬프트 특수 효과를 구현합니다.다음 기사：jquery는 아름다운 탐색 메뉴 마우스 프롬프트 특수 효과를 구현합니다.

jquery는 애니메이션 효과가 포함된 웹페이지를 처음으로 열기 위한 TAB 전환 코드를 구현합니다._jquery

관련 기사