jQuery實現的選項卡的巢狀程式碼例項

antzone發表於2017-03-22
jQuery巢狀

關於選項卡功能大家一定都不會陌生，無非就是滑鼠點選或者懸浮能夠切換相關的內容。

通常情況下，大家見到的選項卡都是沒有巢狀功能的，也就是說就是完成了一層切換效果，本章節分享一段程式碼例項，實現了選項卡的巢狀功能，也就是選項卡中巢狀有選項卡功能，也就能夠容納更多的內容。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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.$(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#title li:first").addClass("new").siblings().addClass("old")，在預設狀態下，為id屬性值為title的元素下第一個li元素新增名為new的class類，然後為其他的兄弟li元素新增old的class類。也就是在預設狀態下橫向的選項卡第一個字型是紅色，其他的都是黑色。

3.$("#content div:first").show().siblings().hide()，將id為content下第一個div設定為顯示，其他的兄弟元素隱藏。

4.$(".inContent:first").show().siblings().hide()，將class屬性值為inContent的第一個元素設定為顯示，兄弟元素隱藏。

5.$("#title li").click(function(){})，為相應的li元素註冊click事件處理函式。

6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new")，如果點選頂部的li元素的話，會為當前li元素新增名為new的class類，然後刪除名為old的class類，然後將其他兄弟元素新增名為old的class類，刪除名為new的class類。

7.$(".info").hide().eq($("#title li").index(this)).show()，首先將class名為info的元素隱藏，然後將對應索引的元素顯示。

8.$(".info div:first-child").show().siblings().hide()，將info下面的div元素下的第一個子元素設定為顯示，其他的元素隱藏。

三.相關閱讀:

1.:first選擇器可以參閱jQuery :first一章節。

2.addClass()函式可以參閱jQuery addClass()一章節。

3.siblings()函式可以參閱jQuery siblings()一章節。

4.removeClass()函式可以參閱jQuery removeClass()一章節。

5.eq()函式可以參閱jQuery eq()一章節。

6.index()函式可以參閱jQuery index()一章節。

相關文章