Heim > Artikel > Web-Frontend > jquery implementiert Tabs mit verschachtelter Funktionalität_jquery

jquery implementiert Tabs mit verschachtelter Funktionalität_jquery

WBOYOriginal: 2016-05-16 15:15:431068Durchsuche

Jeder muss mit der Tab-Funktion vertraut sein. Es ist nichts weiter als das Klicken oder Bewegen der Maus, um verwandte Inhalte zu wechseln.
Unter normalen Umständen verfügen die angezeigten Registerkarten nicht über die Verschachtelungsfunktion, was bedeutet, dass eine Ebene mit Schalteffekten abgeschlossen ist. In diesem Kapitel wird ein Codebeispiel zur Realisierung der Verschachtelungsfunktion der Registerkarte, also der verschachtelten Registerkarte, vorgestellt Die Funktion kann mehr Inhalte aufnehmen.
Der Code lautet wie folgt:

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

Der obige Code implementiert die Verschachtelungsfunktion von Tabs. Hier finden Sie eine Einführung in den Implementierungsprozess.
1. Umsetzungsprinzip:
Das Prinzip ist eigentlich sehr einfach: Zuerst wird ein kleiner Tab in einen großen Tab verschachtelt und dann wird der kleine Tab umgeschaltet. Das ist so einfach, dass ich es hier nicht im Detail vorstellen werde . Weitere Informationen finden Sie in den Codekommentaren.
2. Codekommentare:
1.$(function(){}), Nachdem die Dokumentstruktur vollständig geladen ist, führen Sie den Code in der Funktion aus.
2.$("#title li:first").addClass("new").siblings().addClass("old"), Im Standardzustand ist es so id Fügen Sie dem ersten li-Element unter dem Element, dessen Attributwert title ist, eine Klasse mit dem Namen new hinzu und fügen Sie dann den anderen gleichgeordneten li-Elementen eine Klasse mit dem Namen old hinzu. Das heißt, standardmäßig ist die erste Schriftart der horizontalen Registerkarte rot und die anderen schwarz.
3.$("#content div:first").show().siblings().hide(), Legen Sie das erste Div mit der ID als anzuzeigenden Inhalt fest. Andere gleichgeordnete Elemente werden ausgeblendet.
4.$(".inContent:first").show().siblings().hide(), Legen Sie das erste Element fest, dessen Klassenattributwert inContent ist, um anzuzeigen, Geschwister Elemente werden ausgeblendet.
5.$("#title li").click(function(){}), Registrieren Sie den Click-Event-Handler für das entsprechende li-Element.
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),Wenn Sie oben auf das li-Element klicken, wird eine Klasse mit dem Namen new zum aktuellen li-Element hinzugefügt und anschließend die Klasse mit dem Namen old gelöscht. Anschließend wird die Klasse mit dem Namen old zu anderen Geschwisterelementen und der Klasse hinzugefügt benannte neue Art wird gelöscht.
7.$(".info").hide().eq($("#title li").index(this)).show(), Erste Änderungsklasse Das Element mit dem Namen info wird ausgeblendet und anschließend wird das Element mit dem entsprechenden Index angezeigt.
8.$(".info div:first-child").show().siblings().hide(), Ändern Sie das erste div-Element unter info. Untergeordnete Elemente werden festgelegt anzuzeigen und andere Elemente werden ausgeblendet.

Das Obige ist der detaillierte Inhalt dieses Artikels. Ich hoffe, er wird für alle bei der Implementierung von JQuery-Tabs hilfreich sein.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So springen Sie über das Eingabeaufforderungsfeld in JavaScript_javascript skills zur SeiteNächster Artikel：So springen Sie über das Eingabeaufforderungsfeld in JavaScript_javascript skills zur Seite

In Verbindung stehende Artikel

Mehr sehen