Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery ist die einfachste Implementierung des Wechsels von Tab-Optionen

php中世界最好的语言
Freigeben: 2018-04-26 09:40:18
Original
3155 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen die einfachste Möglichkeit, den Tab-Optionswechsel mit jQuery zu implementieren. Was sind die Vorsichtsmaßnahmen für jQuery, um den Tab-Optionswechsel zu implementieren?

Rendering:

jQuery ist die einfachste Implementierung des Wechsels von Tab-Optionen

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>
Nach dem Login kopieren
      
  • 国事
  •   
  • 军情
  •   
  • 图片
  •  
 

  

国事

  

军情

  

图片

 

 

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

  

国事

  

军情

  

图片

  Ich glaube, ich habe den Fall gelesen In diesem Artikel beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Jquery implementiert Element-Drag-Sortierung (mit Code)

jQuery+CSS implementiert Beschriftungsspaltenschalter ( mit Code)

Das obige ist der detaillierte Inhalt vonjQuery ist die einfachste Implementierung des Wechsels von Tab-Optionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage