Maison > Article > interface Web > jquery implémente des onglets avec des fonctionnalités imbriquées_jquery

jquery implémente des onglets avec des fonctionnalités imbriquées_jquery

WBOYoriginal: 2016-05-16 15:15:431068parcourir

Tout le monde doit être familier avec la fonction d'onglet. Ce n'est rien de plus que de cliquer ou de passer la souris pour changer de contenu associé.
Dans des circonstances normales, les onglets que vous voyez n'ont pas la fonction d'imbrication, ce qui signifie qu'une couche d'effet de commutation est terminée. Ce chapitre partage un exemple de code pour réaliser la fonction d'imbrication de l'onglet, c'est-à-dire dans l'onglet L'onglet imbriqué. la fonction peut accueillir plus de contenu.
Le code est le suivant :

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

Le code ci-dessus implémente la fonction d'imbrication des onglets. Voici une introduction à son processus d'implémentation.
1.Principe de mise en œuvre :
Le principe est en fait très simple. En fait, un petit onglet est imbriqué dans un grand onglet en premier, puis le petit onglet est inversé. C'est aussi simple que cela, je ne le présenterai donc pas en détail ici. , veuillez consulter les commentaires du code pour plus de détails.
2. Commentaires du code :
1.$(function(){}), Une fois la structure du document complètement chargée, exécutez le code dans la fonction.
2.$("#title li:first").addClass("new").siblings().addClass("old"), Dans l'état par défaut, c'est id Ajoutez une classe nommée new au premier élément li sous l'élément dont la valeur d'attribut est title, puis ajoutez une classe nommée old aux autres éléments li frères. Autrement dit, par défaut, la première police de l'onglet horizontal est rouge et les autres sont noires.
3.$("#content div:first").show().siblings().hide(), Définissez le premier div avec l'identifiant comme contenu à afficher. Les autres éléments frères sont masqués.
4.$(".inContent:first").show().siblings().hide(), Définissez le premier élément dont la valeur de l'attribut de classe est inContent à afficher, frère les éléments sont masqués.
5.$("#title li").click(function(){}), Enregistrez le gestionnaire d'événements click pour l'élément li correspondant.
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),Si vous cliquez sur l'élément li en haut, une classe nommée new sera ajoutée à l'élément li actuel, puis la classe nommée old sera supprimée. Ensuite, la classe nommée old sera ajoutée aux autres éléments frères et la classe. nommé nouveau sera supprimé.
7.$(".info").hide().eq($("#title li").index(this)).show(), Première classe de changement L'élément nommé info est masqué, puis l'élément avec l'index correspondant est affiché.
8.$(".info div:first-child").show().siblings().hide(), Modifiez le premier élément div sous info Les éléments enfants sont définis à afficher et d'autres éléments sont masqués.

Ce qui précède est le contenu détaillé de cet article. J'espère qu'il sera utile à tout le monde dans la mise en œuvre des onglets jquery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment accéder à la page via la boîte d'invite dans les compétences JavaScript_javascriptArticle suivant：Comment accéder à la page via la boîte d'invite dans les compétences JavaScript_javascript

Articles Liés

Voir plus