jquery는 중첩된 function_jquery를 사용하여 탭을 구현합니다.-JS 튜토리얼-php.cn

jquery는 중첩된 function_jquery를 사용하여 탭을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:15:43

원래의

1109명이 탐색했습니다.

탭 기능은 누구나 익숙하실 텐데요. 관련 콘텐츠를 전환하려면 마우스를 클릭하거나 호버링하면 됩니다.
일반적인 상황에서 표시되는 탭에는 중첩 기능이 없습니다. 이는 전환 효과의 레이어가 완료되었음을 의미합니다. 이 장에서는 탭의 중첩 기능, 즉 탭에서 구현하는 코드 예제를 공유합니다. 기능은 더 많은 콘텐츠를 수용할 수 있습니다.
코드는 다음과 같습니다.

<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 탭을 구현하는 모든 분들께 도움이 되기를 바랍니다.