집 >웹 프론트엔드 >JS 튜토리얼 >jQuery의 탭 전환 effect_jquery에 대한 간단한 데모

jQuery의 탭 전환 effect_jquery에 대한 간단한 데모

WBOY원래의: 2016-05-16 15:26:331486검색

이 기사의 예에서는 탭 전환 효과를 달성하기 위한 jQuery의 간단한 데모 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

작동 효과도는 다음과 같습니다

1. 주요 프로그램

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>选项卡</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->
 <div class="tab">
 <div class="tab_menu">
 <ul>
 <li class="on">实事</li>
 <li>政治</li>
 <li>体育</li>
 </ul>
 </div>
 <div class="tab_box">
 <div>实事内容</div>
 <div>政治内容</div>
 <div>体育内容</div>
 </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="js/layout.js"></script>
 </body>
</html>

2. CSS 스타일
예비 레이아웃 코드:

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
}

위 코드는 다음과 같이 레이아웃을 구현합니다.

하지만 표시하려면 프레임의 내용만 필요하므로 위 코드를 보조하는 작은 코드를 추가하기만 하면 됩니다~~~~~~

추가 레이아웃 스타일 코드:

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
 display: none; //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
}
.tab .tab_box > div:first-child{
 display: block;
}

위 프로그램은 .tab .tab_box > div 스타일에 추가 표시를 추가합니다. 또한 첫 번째 프레임 내용만 :first-child 속성을 통해 표시됩니다~~~~~ 레이아웃이 방금 위에 게시한 애니메이션 렌더링과 일치하며 레이아웃이 완료된 것으로 간주됩니다~~~~~~
3. Jquery 코드:

$(function(){
 $(".tab_menu ul li").click(function(){
 $(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
 var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
 $(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
 });
});

이 기사가 jquery 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jquery는 마우스 호버 중지 캐러셀 특수 효과를 구현합니다_jquery다음 기사：jquery는 마우스 호버 중지 캐러셀 특수 효과를 구현합니다_jquery

jQuery의 탭 전환 effect_jquery에 대한 간단한 데모

관련 기사