"Du er her"-script til meny

Loomy · 21. oktober 2006

Holder på å flytte en nettside fra en server til en annen. Problemet er det at på den gamle serveren hadde de et serverside-script som gjorde slik at menypunktet man befinner seg på hadde en annen farge enn de andre (typisk slik en "tabbed" navigasjon funker). På den nye serveren har jeg dessverre ikke mulighet til å lage dette på serverside, så jeg håper at JS kan fikse biffen.

Trenger altså et JS som sjekker href-verdien til en link, sammenligner den med nåværende URL (eller deler av den) og, hvis de matcher, gir linken CSS-klassen "bunnlinkRod". Har prøvd å knote sammen noe selv, men det funket heller dårlig.

Anyone?

Endret 21. oktober 2006 av Loomy

___ · 22. oktober 2006

Jeg har laget et testcase som gjør det du beskriver.

Funksjonen initMenu() finner menyen med ID'en 'menu' og itererer over alle linker i den. Hvis linkenes href er lik location.href (gjeldende dokuments URL) blir klassen på linken satt til 'bunnlinkRod'.

Lag fire identiske filer med navnene index1.html, index2.html, index3.html og index4.html, og putt inn koden nedenfor:

<html>
 <head>
   <style type="text/css">
   .bunnlinkRod {
     color: #FF0000;
   }
   </style>
 </head>
 <body onload="initMenu()">
   <script language="JavaScript" type="text/javascript">
     function initMenu() {
       var menu = document.getElementById('menu');  
       var links = menu.getElementsByTagName('a');
       
       for (var i=0; i<links.length; i++) {
         if (links[i].href == location.href) {
           links[i].className = 'bunnlinkRod';
         }
       }
     }
   </script>
   <ul id="menu">
     <li><a href="index1.html">Link 1</a></li>
     <li><a href="index2.html">Link 2</a></li>
     <li><a href="index3.html">Link 3</a></li>
     <li><a href="index4.html">Link 4</a></li>
   </ul>
 </body>
</html>

Hope this helps

Werner

Jesper Karsrud · 22. oktober 2006

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
 window.onload = func;
}
else {
 window.onload = function() {
 	if (oldonload) {
 	oldonload();
 	}
 	func();
 }
}
}

function getHrefs() {
      var menu = document.getElementById('meny');  
      var links = menu.getElementsByTagName('a');
      
      for (var i=0; i<links.length; i++)  {
   if (links[i].href == location.href)  {
     links[i].className = 'bunnlinkRod';
   }
      }
}

addLoadEvent(getHrefs);

Så kan du bare linke til javascriptet i stedet for å ha det inni HTML-dokumentet ditt. Det funker i hvertfall helt fint

Endret 22. oktober 2006 av Jesper Karsrud

Loomy · 22. oktober 2006

Tusen takk til begge to. De funket fett

Jesper Karsrud · 22. oktober 2006

En ting jeg kanskje burde legge til, er en sjekk om nettleseren faktisk støtter de to DOM-funksjonene som er der, så nettlesere som ikke funker slipper å få error.

function getHrefs() {
if (!document.getElementById || !document.getElementsByTagName) return false;
     var menu = document.getElementById('meny');  
     var links = menu.getElementsByTagName('a');
    
     for (var i=0; i<links.length; i++)  {
  if (links[i].href == location.href)  {
    links[i].className = 'bunnlinkRod';
  }
     }
}

Endret 22. oktober 2006 av Jesper Karsrud

Logg inn

"Du er her"-script til meny

Anbefalte innlegg

Loomy

Lenke til kommentar

Videoannonse

___

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

Loomy

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer