jQuery: Tabs

Autor: Arkadiusz Tobiasz 25 lutego 2011

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.

komentarze 2

  1. Zuzi napisał(a):

    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

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]