Maison  >  Article  >  interface Web  >  jQuery est l'implémentation la plus simple du changement d'option d'onglet

jQuery est l'implémentation la plus simple du changement d'option d'onglet

php中世界最好的语言
php中世界最好的语言original
2018-04-26 09:40:183132parcourir

Cette fois, je vais vous présenter le moyen le plus simple d'implémenter le changement d'option d'onglet avec jQuery. Quelles sont les précautions pour que jQuery implémente le changement d'option d'onglet. Voici un cas pratique, jetons un coup d'œil.

Rendu :

jQuery est limplémentation la plus simple du changement doption donglet

Code :

nbsp;html>


<meta>
<script></script>
<title>简单的tab效果</title>
<style>
* {
  padding: 0px;
  margin:0px
}
body {
  text-align: center
}
.wrap ul {
  overflow: hidden
}
.wrap li {
  float: left;
  list-style: none;
  margin-right: 10px;
  cursor: pointer;
  padding: 2px 5px
}
.link {
  cursor: pointer;
  color: #F00
}
.wrap {
  width: 200px;
  margin: 50px auto
}
.wrap, .ellipsis {
  font-size: 12px;
  width: 200px;
}
.tab_p p {
  display: none;
  padding: 10px;
}
.tab_p {
  text-align: left;
  border: 1px #CCC solid;
  height: 200px;
  clear: both
}
.cur {
  background: #060;
  color: #FFF
}
#setTab_2{
  margin-top: 20px;
}
</style>
<script>
$(document).ready(function() {
  //tab
    $("#setTab").setTab();
    $("#setTab_2").setTab();
});
 
/*插件代码*/
(function ($) {
  $.fn.setTab = function () {
    var getTab=$(this),//this指向调用函数的ID
      panels = getTab.children("p.tab_p").children("p"),
      tabs = getTab.find("li");
 
    return this.each(function(){
      $(tabs).click(function(e) {
        var index = $.inArray(this, $(this).parent().find("li"));//this指向li
        if (panels.eq(index)[0]) {
          $(tabs).removeClass("cur");
          $(this).addClass("cur");
          panels.css("display", "none").eq(index).css("display", "block");
        }
      });
       
    });
 }
})(jQuery);
 
 
</script>


<p>
 </p>
      
  • 国事
  •   
  • 军情
  •   
  • 图片
  •  
 

  

国事

  

军情

  

图片

 

 

      
  • 国事
  •   
  • 军情
  •   
  • 图片
  •  
 

  

国事

  

军情

  

图片

 

Croyez-le ou non Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Jquery implémente le tri par glissement des éléments (avec code)

jQuery+CSS implémente le commutateur de colonne d'étiquette ( avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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