Of Stack

jquery implements a nested TAB

  • 2020-12-20 03:28:00
  • OfStack

You'll be familiar with the tabbed feature, which is the ability to switch related content by clicking or hovering with the mouse.
In general, the tabs you see have no nesting function, that is to say, 1 layer switching effect has been completed. This section shares 1 code example to realize the nesting function of tabs, that is, tabs are nested within tabs, which can also contain more content.
The code is as follows: 


<head>
<meta charset="gb2312">
<title>jquery TAB </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> news </li>
   <li> domestic </li>
   <li> fashion </li>
   <li> tourism </li>
   <li> Science and technology </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>

The above code implements the nesting of tabs, and the following is how it works.
1. Implementation Principle:
The principle is actually very simple, in fact, is a large TAB covered by a small TAB, first for the switch of a large TAB, and then for the switch of a small TAB, it is so simple, here is not introduced, specific you can see the code comments.
2. Code comments:
1.$(function(){}), the document structure is fully loaded before the execution of the function code.
2.$("#title li:first").addClass ("new").siblings ().addClass ("old"), by default, adds the class class named new for the first li element with title attribute value, and then the class class of old for the other sibling li elements. By default, the first font of the horizontal TAB is red and everything else is black.
3.$("#content div:first").show ().siblings ().hide ().hide(), set id to content the first div and hide the other sibling elements.
$(".inContent :first").show ().siblings ().hide (), set the first element of the class attribute value to inContent to show and the sibling element to hide.
5.$("#title li").click(function(){}), registers the click event handler for the corresponding li element.
6.$((this).addClass ("new").siblings ("old").addClass ("old").addClass ("old").removeClass ("new"). If you click on the top of the li element, you will add the class class named new to the current li element, then delete the class class named old, and then add the other siblings to the class class named old. Delete the class class named new.
7.$(".info ").eq ($("#title li").index (this).show (), first hide the element of class named info, then show the element of the corresponding index.
$(".info div: first-ES90en ").show ().siblings ().hide ().hide(), set the first child element under div element info to show and the rest to hide.

That's all for this article, and hopefully it will help you implement the jquery TAB.

Related articles: