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/
