Script: Ændre værdien af alle a-tags class navne

Sagtens, men det er uklogt !-)

-- bare det, du laver nu er ikke smart, for browseren skal genberegne hele sit css-DOM-træ, fordi du ændrer een class eet sted, så det er unødigt arbejde, når man nemmere kunne:

onclick="this.style.color='red';return false"

-- eller lægge det ind i en funktion, som eventuelt ændrede et par properties !-)

-- men du kan sagtens tage fat i samtlige a-tags i en funktion, men hvis du ændrer class på alle sammen, vil du kunne risikere, at browseren 15 gange skal geberegne css-DOM-træet, som holder styr på udseende af alle elementer på siden ...

-- browseren kan jo ikke gætte i hvilket omfang du nester, så den har et bibliotek, over hvordan alle elementers css-regler ser ud !o]

OK, men hvordan gør man..?
Det er nemlig en meget lille side og 15 var også blot et tal, i virkeligheden er der måske max 5 links.. og ellers er der ikke noget på siden..

Men du har ret og det ville da også være bedre hvis man kunne lave en funktion der kun ændrede class til "inaktiv" på dem hvor den er "aktiv"
Kan man gøre det i stedet..? I så fald ville den kun skulle geberegne css-DOM-træet 1 gang.

Selv ville jeg gøre sådan noget lignende:

<style type="text/css">
.aktiv{
  color:red;
/*og flere properties*/
}
.inaktiv{
  color:blue;
/*og flere properties*/
}
</style>

<script type="text/javascript">
function changeLinks(lnk){
  var lnks = document.getElementsByTagName('A');
  for(i=0;lnks.length>i;i++){
    if(lnks[i]==lnk){
      lnks.style.color = 'red';
      //og andre lnks.style.noget !-)
    }else{
      lnks.style.color = 'blue';
      //og andre lnks.style.noget !-)
    }
  }
}
</script>


<a href="#" onclick="changeLinks(this);return false;" class="inaktiv">Link</a>
<a href="#" onclick="changeLinks(this);return false;" class="inaktiv">Link</a>
<a href="#" onclick="changeLinks(this);return false;" class="inaktiv">Link</a>
<a href="#" onclick="changeLinks(this);return false;" class="inaktiv">Link</a>
<a href="#" onclick="changeLinks(this);return false;" class="inaktiv">Link</a>

-- på den måde skal browseren overhovedet ikke røre ved sit DOM-træ ...

-- forestil dig forøvrigt, at de nede på biblioteket tager samtlige bøger ned fra hylderne, og starter fra en ende af med at sætte dem på plads, fordi du afleverer een !-)

-- og der var sæ'fø'li' en lille fejl i nogle linjer:

<script type="text/javascript">
function changeLinks(lnk){
  var lnks = document.getElementsByTagName('A');
  for(i=0;lnks.length>i;i++){
    if(lnks[i]==lnk){
      lnks[i].style.color = 'red';
      //og andre lnks[i].style.noget !-)
    }else{
      lnks[i].style.color = 'blue';
      //og andre lnks[i].style.noget !-)
    }
  }
}
</script>