jQuery: Tabs

Pewnie nieraz spotykasz się na stronach internetowych z tzw. zakładkami, czyli z angielskiego tabsami. Pozwalają one zaoszczędzić miejsce na stronie i wyświetlać w jednym miejscu wiele treści, dzięki możliwości przełączania się pomiędzy poszczególnymi zakładkami. W tym wpisie postaram się pokazać w prosty sposób jak możecie na swojej stronie zrobić sobie tabsy z wykorzystaniem jQuery.

Zanim rozpoczniemy pracę musimy ściągnąć bibliotekę jQuery, o ile z niej jeszcze nie korzystasz. Najnowszą wersję możesz pobrać stąd.

To do dzieła! Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętej biblioteki:

1
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Teraz przejdźmy do kodu html odpowiedzialnego za wyświetlanie zakładek oraz ich zawartości:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="tabs">  
   <li id="tabs-1" class="active">Zakładka 1</li>  
   <li id="tabs-2">Zakładka 2</li>  
   <li id="tabs-3">Zakładka 3</li>  
</ul>  
<span class="clear"></span>  
<div class="tab" id="tab-1">  
   <h1>Zakładka 1</h1>  
   Tekst
</div>  
<div class="tab" id="tab-2">  
   <h1>Zakładka 2</h1>  
   Tekst
</div>  
<div class="tab" id="tab-3">  
   <h1>Zakładka 3</h1>  
   Tekst
</div>

Teraz czas na ostylowanie powyższego fragmentu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.clear{  
    clear: both;  
    height: 0;  
    visibility: hidden;  
    display: block;  
}
ul.tabs {  
    list-style: none;  
    list-style-position: outside;  
}  
ul.tabs li {  
    float: left;  
    margin-right: 5px;  
    margin-bottom: -1px;  
}  
ul.tabs li {  
    font-weight: 700;  
    display: block;  
    padding: 5px 10px 5px 10px;  
    background: #efefef;  
    margin-bottom: -1px;  
    border: 1px solid #d0ccc9;  
    border-width: 1px 1px 1px 1px;  
    position: relative;  
    color: #898989;  
    cursor: pointer;  
}  
ul.tabs li.active {  
    background: #fff;  
    top: 1px;  
    border-bottom: 0;  
    color: #5f95ef;  
}  
 
.tab {  
    margin: 0pt auto;  
    background: #efefef;  
    background: #fff;  
    border: 1px solid #d0ccc9;  
    text-align: left;  
    padding: 10px;  
    padding-bottom: 20px;  
    font-size: 11px;  
}  
.tab h1{  
    line-height: 1em;  
    vertical-align: middle;  
    height: 48px;  
    padding: 10px 10px 10px 52px;  
    font-size: 32px;  
}

Obecnie wyświetlamy wszystkie 3 divy, a chcemy wyświetlać tylko jeden, który będzie się zmieniał w momencie przełączania poszczególnych zakładek. W związku z tym w sekcji <head>…</head> umieszczamy:

1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function() {
    $("#tab-1").css("display", "block");
    $("#tab-2").css("display", "none");
    $("#tab-3").css("display", "none");
});
</script>

Teraz pozostaje nam jedynie napisać mechanizm przełączania zakładek. Modyfikujemy powyższy kod do postaci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
$(document).ready(function() {
    $("#tab-1").css("display", "block");
    $("#tab-2").css("display", "none");
    $("#tab-3").css("display", "none");
    $(".tabs > li").click(function(e){
       switch(e.target.id) {
       case "tabs-1":
        $("#tabs-1").addClass("active");
        $("#tabs-2").removeClass("active");
                $("#tabs-3").removeClass("active");
                $("#tab-1").fadeIn();  
                $("#tab-2").css("display", "none");  
                $("#tab-3").css("display", "none");  
            break;  
            case "tabs-2":  
                $("#tabs-1").removeClass("active");  
                $("#tabs-2").addClass("active");  
                $("#tabs-3").removeClass("active");  
                $("#tab-2").fadeIn();  
                $("#tab-1").css("display", "none");  
                $("#tab-3").css("display", "none");  
            break;  
            case "tabs-3":  
                $("#tabs-1").removeClass("active");  
                $("#tabs-2").removeClass("active");  
                $("#tabs-3").addClass("active");  
                $("#tab-3").fadeIn();  
                $("#tab-2").css("display", "none");  
                $("#tab-1").css("display", "none");  
            break;  
        }  
    });  
});
</script>

W momencie kliknięcia na którąkolwiek zakładkę z pozostałych dwóch usuwana jest klasa active, która dodawana jest do klikniętej zakładki. Ponadto dwa divy, które należą do nieaktywnych zakładek są ukrywane: display:none natomiast pokazywany jest ten przypisany do aktualnie aktywnej zakładki.

Demo działającego skryptu możecie znaleźć tutaj.

Comments

Zuzi

Super tutorial jednak wkradł się błąd 🙂 Ponieważ zakładka 3 pokazuje się jako 1 🙂

case „tabs-3”:
$(„#tabs-1”).removeClass(„active”);
$(„#tabs-2”).removeClass(„active”);
$(„#tabs-3”).addClass(„active”);
$(„#tab-1”).fadeIn();
$(„#tab-2”).css(„display”, „none”);
$(„#tab-3”).css(„display”, „none”);
break;

Powinno być 🙂

case „tabs-3”:
$(„#tabs-1”).removeClass(„active”);
$(„#tabs-2”).removeClass(„active”);
$(„#tabs-3”).addClass(„active”);
$(„#tab-3”).fadeIn();
$(„#tab-1”).css(„display”, „none”);
$(„#tab-2”).css(„display”, „none”);
break;

🙂 Pozdrawiam

Reply
    Arkadiusz Tobiasz

    Dzięki, już poprawione 🙂

    Reply

Leave a Comment

eleven + 9 =