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:
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>
国事
军情
图片
国事
军情
图片
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!