Heim > Artikel > Web-Frontend > Zwei jQuery-Möglichkeiten zum Implementieren der Tab-Funktionalität

Zwei jQuery-Möglichkeiten zum Implementieren der Tab-Funktionalität

小云云Original: 2018-01-23 10:30:532163Durchsuche

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: &#39;&#39;;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: &#39;&#39;;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 方法一
 $(&#39;#p1&#39;).find(&#39;input&#39;).click(function(){
 $(&#39;#p1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
 $(&#39;#p1&#39;).find(&#39;p&#39;).css(&#39;display&#39;,&#39;none&#39;)
 $(this).attr(&#39;class&#39;,&#39;active&#39;);
 $(&#39;#p1&#39;).find(&#39;p&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
 });
 //jQuery 方法二
 $(&#39;.tab&#39;).find(&#39;li&#39;).click(function(){
 var index = $(this).index();
 $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
 $(&#39;.content&#39;).find(&#39;li&#39;).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!

Stellungnahme：

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

Vorheriger Artikel：JS implementiert die animate()-Animation von jQueryNächster Artikel：JS implementiert die animate()-Animation von jQuery

In Verbindung stehende Artikel

Mehr sehen