jquery implements tabs with nested functionality

jquery implements tabs with nested functionality_jquery

WBOY

Release： 2016-05-16 15:15:43

Original

1132 people have browsed it

Everyone must be familiar with the tab function. It is nothing more than clicking or hovering with the mouse to switch related content.
Under normal circumstances, the tabs you see do not have the nesting function, which means that a layer of switching effect is completed. This chapter shares a code example to realize the nesting function of the tab, that is, in the tab The nested tab function can accommodate more content.
The code is as follows:

<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>

Copy after login

The above code implements the nesting function of tabs. Here is an introduction to its implementation process.
1. Implementation principle:
The principle is actually very simple. In fact, a small tab is nested inside a large tab. The large tab is switched first, and then the small tab is switched. It is that simple, so I won’t introduce it in detail here. , please see the code comments for details.
2. Code Comments:
1.$(function(){}), After the document structure is completely loaded, execute the code in the function.
2.$("#title li:first").addClass("new").siblings().addClass("old"), In the default state, it is id Add a class named new to the first li element under the element whose attribute value is title, and then add a class named old to the other sibling li elements. That is, by default, the first font of the horizontal tab is red, and the others are black.
3.$("#content div:first").show().siblings().hide(), Set the first div with the id as content to be displayed. Other sibling elements are hidden.
4.$(".inContent:first").show().siblings().hide(), Set the first element whose class attribute value is inContent to display , sibling elements are hidden.
5.$("#title li").click(function(){}), Register the click event handler for the corresponding li element.
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),If you click the li element at the top, a class named new will be added to the current li element, and then the class named old will be deleted. Then the class named old will be added to other sibling elements, and the class named new will be deleted. kind.
7.$(".info").hide().eq($("#title li").index(this)).show(), First change class The element named info is hidden, and then the element with the corresponding index is displayed.
8.$(".info div:first-child").show().siblings().hide(), Change the first div element under info Child elements are set to show and other elements are hidden.

The above is the detailed content of this article. I hope it will be helpful to everyone in implementing jquery tabs.