jquery はネストされた機能を持つタブを実装します

jquery はネストされた機能を持つタブを実装します_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 という名前のクラスが他の兄弟要素に追加され、クラスが追加されます。新しい名前の種類は削除されます。
7.$(".info").hide().eq($("#title li").index(this)).show(), 最初のクラス変更info という名前の要素が非表示になり、インデックスに対応する要素が表示されます。
8.$(".info div:first-child").show().siblings().hide(), info の下の最初の div 要素を変更します子要素が設定されていますを表示し、他の要素は非表示にします。

以上がこの記事の詳細な内容であり、jqueryタブを実装する皆さんの参考になれば幸いです。