Zakładki na stronach internetowych stanowią bardzo ważną część nawigacyjną. Zakładki to nic innego jak menu nawigacyjne na naszej stronie.
Dzięki nim łatwiej nam znaleźć interesującą nas treść i użytkownik nie irytuje się czytając informacje, które kompletnie nie są mu potrzebne.

Przejdzmy do pisania kodu.

Dodajemy link do frameworka jQuery w sekcji Head

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  

Dodajemy scrypt funkcyjny (dodałem komentarze wyjaśniające)

<script>
   
  $(document).ready(function(){  
      
    // Klikniecie w klase tab 
    $("a.tab").click(function () {  
          
        // usuniecie klasy active  
        $(".active").removeClass("active");  
          
        // dodanie klasy active do kliknietego taba 
        $(this).addClass("active");  
          
        // rozwiniecie tresci
        $(".content").slideUp();  
          
        // dodanie atrybutu title do kliknietego taba  
        var content_show = $(this).attr("title");  
        $("#"+content_show).slideDown();  
        
    });  
  
  });  
 </script>

Kod HTML dodajemy do sekcji Body


<div id="tabbed_box_1" class="tabbed_box">  
    <h1>Zakładki Taby (jQuery)<small>demo</small></h1>  
    <div class="tabbed_area">  
      
        <ul class="tabs">  
    <li><a href="#" title="content_1" class="tab active">Najnowsze</a></li>  
    <li><a href="#" title="content_2" class="tab">Kategorie</a></li>  
    <li><a href="#" title="content_3" class="tab">Archiwalne</a></li>  
</ul>  
          
        <div id="content_1" class="content">  
            <ul>  
                <li><a href="#">Anglia: Szczęsny szybko pokonany</a></li>  
                <li><a href="#">Czarna lista prezentów. Zagrożenie dla klientów</a></li>  
                <li><a href="#">Krzywa obudowa to fenomen</a></li>  
                <li><a href="#">To nie koniec walki FoodCare z Michalczewskim</a></li>  
                <li><a href="#">Rooney najbogatszym angielskim piłkarzem</a></li>  
                <li><a href="#">Wsparcie unijne dla uczniów z Płocka</a></li>  
            </ul>  
        </div>  
        <div id="content_2" class="content">  
            <ul>  
                <li><a href="#">Sport<small>6 Postów</small></a></li>  
                <li><a href="#">Polityka<small>4 Posty</small></a></li>  
                <li><a href="#">Informacje<small>22 Posty</small></a></li>  
                <li><a href="#">Zwierzęta<small>12 Postów</small></a></li>  
                <li><a href="#">Pogoda<small>3 Posty</small></a></li>  
                <li><a href="#">Podróże<small>1 Post</small></a></li>  
            </ul>  
        </div>  
        <div id="content_3" class="content">  
            <ul>  
                <li><a href="#">Grudzień 2013<small>6 Postów</small></a></li>  
                <li><a href="#">Listopad 2013 <small>4 Posty</small></a></li>  
                <li><a href="#">Pazdziernik 2013<small>22 Posty</small></a></li>  
                <li><a href="#">Wrzesień 2013<small>12 Postów</small></a></li>  
                <li><a href="#">Sierpień 2013<small>3 Posty</small></a></li>  
                <li><a href="#">Lipiec 2013<small>1 Post</small></a></li>  
            </ul>  
        </div>  
      
    </div> 
	
</div>

</div>

Zostało nam jeszcze ostylowanie naszych zakładek stylami Css. Możemy je dodać w pliku zewnętrznym lub dodać do sekcji Head:

#tabbed_box_1{  
    margin:0px auto 0px auto;  
    width:300px;  
}  

.tabbed_box h1 {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:23px;  
    color:#858585; 
    letter-spacing:-1px;  
    margin-bottom:10px;  
}  
.tabbed_box h1 small {  
    color:#e3e9ec;  
    font-weight:normal;  
    font-size:9px;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    text-transform:uppercase;  
    position:relative;  
    top:-4px;  
    left:6px;  
    letter-spacing:0px;  
}  
.tabbed_area {  
    border:1px solid #494e52;  
    background-color:#333;  
    padding:8px;      
}
ul.tabs {  
    margin:0px; padding:0px;  
}  
ul.tabs li {  
    list-style:none;  
    display:inline;  
} 
ul.tabs li a {  
    background-color:#eee;  
    color:#333;  
    padding:8px 11px 8px 12px; 
    text-decoration:none;  
    font-size:9px;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-weight:bold;  
    text-transform:uppercase;  
    border:1px solid #464c54;   
}  
ul.tabs li a:hover {  
    background-color:#eed;  
    border-color:#2f343a;  
}  
ul.tabs li a.active {  
    background-color:#eee;  
    color:red;  
    border-top:1px solid red;   
     border:3px solid #eee; 
} 

.content {  
    background-color:#ffffff;  
    padding:10px;  
    border:1px solid #eee;   
    border-top:0;  
}  
#content_2, #content_3 { display:none; }  

ul.tabs {  
    margin:0px; padding:0px;  
    margin-top:5px;  
    margin-bottom:6px;  
}  
.content ul {  
    margin:0px;  
    padding:0px 20px 0px 20px;  
}  
.content ul li {  
    list-style:none;  
    border-bottom:1px solid #d6dde0;  
    padding-top:15px;  
    padding-bottom:15px;  
    font-size:13px;  
}  
.content ul li a {  
    text-decoration:none;  
    color:#333;  
    font-family:Verdana, Arial, Helvetica, sans-serif; 
	
}  
.content ul li a:hover{
    text-decoration:underline; 
}
.content ul li a small {  
    color:#8b959c;  
    font-size:9px;  
    text-transform:uppercase;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    position:relative;  
    left:4px;  
    top:0px;  
} 
.content ul li:last-child {  
    border-bottom:none;  
}  
ul.tabs li a {  
    background:#999; 
}  
ul.tabs li a.active {  
    background:#eee; 
	   
}  
.content {  
    background:#eee;   
} 

Zobacz efekt końcowy DEMO

xHej! Jeśli macie jakieś pytania, problemy bądź sugestie to komentujcie pod tematem.

Całą paczkę skryptu możecie pobrać stąd