Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > jquery tabs的实现代码_jquery

jquery tabs的实现代码_jquery

WBOY

Freigeben： 2016-05-16 18:52:16

Original

1209 Leute haben es durchsucht

关键代码：

复制代码代码如下:

$(function(){ 
$(".tabs li").eq(0).css("background","#499AFF"); 
$(".tabs div").eq(0).show(); 
$(".tabs>ul>li").click(function(i){ 
$(this).css("background","#499AFF").siblings().css("background","#ffffff"); 
$(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); 
return false; 
}) 
}) 

演示（请“运行代码”后，刷新一次）：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>jquery tab</title> 
<script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
    $(".tabs li").eq(0).css("background","#499AFF"); 
    $(".tabs div").eq(0).show(); 
    $(".tabs>ul>li").click(function(i){ 
        $(this).css("background","#499AFF").siblings().css("background","#ffffff"); 
        $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); 
        return false; 
    }) 
}) 
</script> 
<style type="text/css"> 
*{ 
    padding:0; 
    margin:0; 
} 
body{ 
    margin-left:100px; 
    margin-top:100px; 
} 
.tabs{ 
    width:250px; 
    height:300px; 
} 
.tabs ul{ 
    width:250px; 
    height:28px; 
} 
.tabs ul li{ 
    float:left; 
    width:50px; 
    height:28px; 
    color:white; 
    line-height:28px; 
    margin-right:10px; 
    text-align:center; 
} 
.tabs ul li a:link,.tabs ul li a:visited{ 
    color:black; 
} 
.tabs div{ 
    border:1px solid #499AFF; 
    display:none; 
} 
.tabs div a{ 
    display:block; 
    width:250px; 
    text-decoration:none; 
    margin-top:5px; 
    padding-left:10px; 
} 
a:link,a:visited{ 
    color:blue; 
    font-size:12px; 
    text-decoration:none; 
} 
a:hover{ 
    color:red; 
} 
li{ 
    list-style:none; 
} 
</style>

<div class="tabs"> 
    <ul> 
    <li><a href="#" target="_blank"></a></li>
</ul>
</div>

Verwandte Etiketten：

jquery tabs

Quelle：php.cn

Vorheriger Artikel：关于JavaScript的一些看法_javascript技巧 Nächster Artikel：广告切换效果(缓动切换)_广告代码

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

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...

Aus 2024-04-06 14:54:03

0

2

421

So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...

Aus 2024-04-05 09:26:49

0

1

1418

Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...

Aus 2024-04-04 18:40:04

0

1

3528

Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...

Aus 2024-04-04 17:27:27

0

1

417

Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...

Aus 2024-04-04 12:53:48

0

1

303

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage