jquery는 중첩된 function_jquery를 사용하여 탭을 구현합니다.
- WBOY원래의
- 2016-05-16 15:15:431068검색
탭 기능은 누구나 익숙하실 텐데요. 관련 콘텐츠를 전환하려면 마우스를 클릭하거나 호버링하면 됩니다.
일반적인 상황에서 표시되는 탭에는 중첩 기능이 없습니다. 이는 전환 효과의 레이어가 완료되었음을 의미합니다. 이 장에서는 탭의 중첩 기능, 즉 탭에서 구현하는 코드 예제를 공유합니다. 기능은 더 많은 콘텐츠를 수용할 수 있습니다.
코드는 다음과 같습니다.
<head>
<meta charset="gb2312">
<title>jquery选项卡</title>
<style type="text/css">
body, ul, li, div, a{
margin:0px;
padding:0px;
}
body{
margin-top:10px;
margin-left:15px;
}
#all{
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
width:255px;
}
#title li{
float:left;
list-style:none;
width:50px;
border-top:2px solid #f60;
border-right:1px solid #ccc;
text-align:center;
padding-top:3px;
}
#title li:last-child{
border-right:1px solid #fff;
}
.new{
border-bottom:1px solid #fff;
color:#f60;
}
.old{
border-bottom:1px solid #ccc;
}
#content{
clear:both;
}
#content ul{
margin-left:5px;
list-style:none;
float:left;
}
#content li{
width:40px;
height:30px;
background-color:#f60;
text-align:center;
color:#fff;
}
.inContent{
width:205px;
height:90px;
background-color:#f6c;
margin-left:50px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#title li:first").addClass("new").siblings().addClass("old");
$("#content div:first").show().siblings().hide();
$(".inContent:first").show().siblings().hide();
$("#title li").click(function(){
$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new");
$(".info").hide().eq($("#title li").index(this)).show();
$(".info div:first-child").show().siblings().hide();
});
$(".info li").mouseover(function(){
$(this).css("color","#20f");
$(".inContent").hide().eq($(".info li").index(this)).show();
});
$(".info li").mouseout(function(){
$(this).css("color","#fff");
});
});
</script>
</head>
<body>
<div id="all">
<div id="title">
<ul>
<li>要闻</li>
<li>国内</li>
<li>时尚</li>
<li>旅游</li>
<li>科技</li>
</ul>
</div>
<div id="content">
<div style="clear:both;" class="info">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<div>
<div class="inContent">A1</div>
<div class="inContent">B1</div>
<div class="inContent">C1</div>
</div>
</div>
<div class="info">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<div>
<div class="inContent">A2</div>
<div class="inContent">B2</div>
<div class="inContent">C2</div>
</div>
</div>
<div class="info">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<div>
<div class="inContent">A3</div>
<div class="inContent">B3</div>
<div class="inContent">C3</div>
</div>
</div>
<div class="info">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<div>
<div class="inContent">A4</div>
<div class="inContent">B4</div>
<div class="inContent">C4</div>
</div>
</div>
<div class="info">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<div>
<div class="inContent">A5</div>
<div class="inContent">B5</div>
<div class="inContent">C5</div>
</div>
</div>
</div>
</div>
</body>
</html>
위 코드는 탭의 중첩 기능을 구현합니다. 구현 과정을 소개합니다.
1. 구현 원칙:
원리는 사실 매우 간단합니다. 사실 큰 탭 안에 작은 탭이 중첩되어 있고, 그 다음 작은 탭이 전환되는 방식이므로 여기서는 자세히 소개하지 않겠습니다. . 자세한 내용은 코드 주석을 참조하세요.
2. 코드 주석:
1.$(function(){}), 문서 구조가 완전히 로드된 후 함수의 코드를 실행합니다.
2.$("#title li:first").addClass("new").siblings().addClass("old"), 기본 상태에서는 id 속성 값이 title인 요소 아래의 첫 번째 li 요소에 new라는 클래스를 추가하고, 다른 형제 li 요소에는 old라는 클래스를 추가합니다. 즉, 기본적으로 가로 탭의 첫 번째 글꼴은 빨간색이고 나머지는 검은색입니다.
3.$("#content div:first").show().siblings().hide(), ID가 있는 첫 번째 div를 표시할 콘텐츠로 설정합니다. 다른 형제 요소는 숨겨집니다.
4.$(".inContent:first").show().siblings().hide(), 클래스 속성 값이 inContent인 첫 번째 요소를 표시하도록 설정, 형제 요소가 숨겨져 있습니다.
5.$("#title li").click(function(){}), 해당 li 요소에 대한 클릭 이벤트 핸들러를 등록합니다.
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),상단의 li 요소를 클릭하면 현재 li 요소에 new라는 클래스가 추가되고, old라는 클래스는 삭제되며, 다른 형제 요소에는 old라는 클래스가 추가됩니다. new로 명명된 종류는 삭제됩니다.
7.$(".info").hide().eq($("#title li").index(this)).show(), 첫 번째 클래스 변경 info라는 이름의 요소가 숨겨지고, 해당 인덱스가 있는 요소가 표시됩니다.
8.$(".info div:first-child").show().siblings().hide(), info 아래의 첫 번째 div 요소 변경 하위 요소가 설정됨 표시하고 다른 요소는 숨겨집니다.
위 내용은 이 글의 자세한 내용이며 jquery 탭을 구현하는 모든 분들께 도움이 되기를 바랍니다.