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

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 :

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!