Heim > Artikel > Web-Frontend > Zwei jQuery-Möglichkeiten zum Implementieren der Tab-Funktionalität
Es gibt viele Möglichkeiten, Tabulatoren zu implementieren, aber sie bleiben gleich und die Idee ist sehr wichtig. In diesem Artikel werden hauptsächlich Beispiele für zwei Methoden zum Schreiben von Tabulatoren in jQuery vorgestellt, die einen guten Referenzwert haben. Werfen wir einen Blick mit dem untenstehenden Editor. Ich hoffe, er kann allen helfen.
Rendering:
Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <title>JQuery 源码分析</title> <style> #p1 p{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} *{margin: 0;padding: 0;} .tab:after{content: '';display: block;clear: both;} .tab li{width: 150px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;list-style: none;float: left;margin: 0 10px;background: #ABCDEF;border-radius: 5px;} .tab li.active{background: #000;color:#fff;} .content:after{content: '';display: block;clear: both;} .content li{width: 460px;height: 300px;padding:20px;background: #f7f7f7;display: none;} </style> </head> <body> <p id="p1"> <input class="active" type="button" value="1" /> <input type="button" value="2"/> <input type="button" value="3"/> <p style="display: block;">11111111111</p> <p>22222222222</p> <p>333333333333</p> </p> <ul class="tab"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ul class="content"> <li style="display: block;">111111111111</li> <li>222222222222</li> <li>333333333333</li> </ul> <script> $(function(){ //jQuery 方法一 $('#p1').find('input').click(function(){ $('#p1').find('input').attr('class',''); $('#p1').find('p').css('display','none') $(this).attr('class','active'); $('#p1').find('p').eq($(this).index()).css('display','block'); }); //jQuery 方法二 $('.tab').find('li').click(function(){ var index = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.content').find('li').eq(index).show().siblings().hide(); }) }) </script> </body> </html>
Verwandte Empfehlungen:
So implementieren Sie den Tab-Tab-Effekt von jQuery Mobile
Detaillierte Erläuterung des JavaScript-Plugins -in Tab Tab
jquery implementiert den Tab-Wechseleffekt
Das obige ist der detaillierte Inhalt vonZwei jQuery-Möglichkeiten zum Implementieren der Tab-Funktionalität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!