Kako pratiti aktivan link u navigaciji?

Objavljeno : 16.12.2014 Čitanja : 1118

Donosim vam jednostavno rješenje kako pratiti aktivan link unutar navigacije pomoću prilično korištene javascript biblioteke jQuery.

 

Što je jQuery?


jQuery je javascript biblioteka koja sadrži mnogo predefiniranih funkcija koje samo čekaju da unaprijedimo naš web. Ukoliko se još niste upoznali sa jQuery-em najbolje je da pogledate jquery.com provjerite o čemu se točno radi i ukoliko želite koristiti pogledate uputu za instalaciju.

 

Kako napraviti navigaciju ?


HTML kod:
 
<nav>
    <ul>
        <li><a href="pocetna">Početna</a></li>
        <li><a href="o-nama">O nama</a></li>
        <li><a href="kontakt">Kontakt</a></li>
    </ul>
</nav>

CSS kod:
 
nav ul li a { color: green; }
.aktivan { color: red; }

jQuery kod:
 
$(document).ready(function(){
    var url = (window.location.href).split("/").pop();
    $('nav ul li a[href="/'+url+'"]').addClass('aktivan');
});

Kratko objašnjenje koda


Kod je prilično jednostavan i radi na principu prepoznavanja trenutnog linka kojeg uspoređuje s linkovima unutar navigacije. Ukoliko je usporedba uspješna dodaje se klasa "aktivan" koja taj link boja u crveno.

Kod možete pogledati i na : http://jsfiddle.net/695kwazq/


Komentiraj članak:

Prijavi se za komentiranje:

Kako bi komentirali članke prijavite se pomoću korisničkog imena i pin-a. Nakon što se jednom prijavite Vaši podaci biti će zapamćeni prilikom sljedeće prijave. Jednom korišteno korisničko ime biti će zauzeto svim ostalim korisnicima. Ukoliko Vas sustav odjavi biti ćete u mogućnosti ponovno se prijaviti korištenjem pin-a unešenog prilikom prve prijave.

Korisničko ime:

Pin:

Dobrodošao,