jQuery - vis aktiv side

 

Hei! Jeg holder mye på med webdesign, og har i de siste ukene sett på javascript-biblioteket jQuery. Det er skikkelig gøy og stilig, og man kan gjøre mye kult med det.

Nå i natt, mens jeg kikka på bugrapporter som har kommet til studentersamfundet-web på launchpad, kom jeg på en løsning på det å utheve et bestemt menypunk som aktiv side. Det aller beste er nok å lage funksjonalitet i nettsiden helt fra starten av til å utheve den aktive siden, men om du ikke har gjort det og har mange forskjellige sider på nettstedet ditt, så er dette en løsning som kan fungere.

Først må du installere jQuery på nettstedet ditt. Hvis du ikke klarer det selv, så trenger du ikke lese videre.

Videre, må du se og skjønne følgende html-kode, som blir brukt i eksemplet mitt:

<html>
<head>
<style>
#menu ul li a { text-decoration: none; }
.aktiv_side { text-decoration: underline; }
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>

Deretter legger du inn følgende javascript-kode, eller akkurat den koden du selv vil bruke, basert på denne koden:

$(document).ready(function() {
var loc = document.location;
$('.#menu ul li a').each(function(){
if( loc == $(this).attr('href') ) {
$(this).addClass('aktiv_side');
}
});
});

Om du ikke forsto dette, men trenger en slik funksjonalitet skissert over, er det bare å legge igjen en kommentar under her. Lykke til med scripting og alt annet gøy!

 

Ingen kommentarer

Skriv en ny kommentar

hits