Javascript "tabbing"

Tag elementet med som parameter:  onclick="menuClick(this);"

og i funktionen

function menuClick(agurk) {
    if (document.getElementsByClassName) {
        var elts = document.getElementsByClassName('activelink');
        for (var i = 0; i < elts.length; ++i)
        elts[i].className = 'link';
  }
    agurk.className='activelink';
}

Det er "dyrt" for browseren at skifte className - man anbefaler normalt kun at skifte de attributter, der skal ændres.

Det virker perfekt i FireFox.

Dog forbliver menu-punkterne som "activelink" i IE 7.0

Det kan vel bedre betale sig at skifte Class, frem for diverse opacity værdier, farver osv? :)

Nogen speciel grund til det skal virke i IE? Det er vist den der document.getElementsByClassName der ikke er i alle browsere - hvis jeg ellers husker korrekt.

<ole>

getElementsByClassName er en proprietær Mozilla metode.

Derudover er det som oftest hurtigere at skifte de enkelte properties på style objektet, end at skifte klasse

/mvh
</bole>

erikjacobsen: Fordi mange stadig bruger IE? :)

Ole, hvordan gør jeg det så?

Alle mine menu-punkter er placeret imellem følg. DIV's som har et ID jeg kan referere til, hvis det skulle være nogen hjælp?
Så kunne scriptet måske endda slippe for at søge hele dokumentet igennem.

<div id="top">
    <div id="links">
        ...
        ...
    </div>
</div>

ActiveLink:
"filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0;"

Link:
filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;

I hvertfald i første omgang, dog er det meget sandsynligt at jeg tilføjer en del mere på et senere tidspunkt :)

Du kan gøre noget i denne stil:

<script type="text/javascript">
var oActiveLink = null;
var oStyles = {
    on: {
        background: "yellow",
        color: "red"
    },
    off: {
        background: "#efefef",
        color: "#000"
    }
};
function setActiveLink(oLnk) {
    var css;
    if (oActiveLink) {
        css = oActiveLink.style;
        for (var x in oStyles.off) css[x] = oStyles.off[x];
    }
    oActiveLink = oLnk;
    css = oActiveLink.style;
    for (var x in oStyles.on) css[x] = oStyles.on[x];
}
</script>

<div>
    <a href="#" onclick="setActiveLink(this);return false">Link A</a>
    <a href="#" onclick="setActiveLink(this);return false">Link B</a>
    <a href="#" onclick="setActiveLink(this);return false">Link C</a>
    <a href="#" onclick="setActiveLink(this);return false">Link D</a>
</div>

Husk, at property navnene i oStyles skal være i CamelCase. Hvis der er en bindestreg i navnet, skal den fjernes, og det andet ord skal staves med stort:

var oStyles = {
    on: {
        backgroundImage: "url(noget_on.gif)",
        color: "red"
    },
    off: {
        backgroundImage: "url(noget_off.gif)",
        color: "#000"
    }
};

Der skal stå backgroundImage ... ikke background-image

Det virker i begge browsere :D

Bemærkede dog at scriptet ikke nulstiller den menu jeg som standard har markeret som "aktiv" når siden loader første gang, medmindre jeg klikker på det først.

Hvordan sætter jeg "var oActiveLink" til et bestemt menu-punkt, i tilfælde hvor siden skal reloades?

window.onload = function(){
    oActiveLink = document.getElementById("ditElmsID");
}

- men hvis det er en inkluderet menu, må du nok lade serveren skrive id'et ditElmsID - udfra informationer om den side, brugeren står kalder

Jeg har prøvet at placere denne både under head og body, men det lader ikke til at virke..

window.onload = function(){
    oActiveLink = document.getElementById("p_arkiv");
}

<div class="link" id="p_arkiv" onclick="setActiveLink(this);return false;" style="background-image: url('img/menu_arkiv.png'); width: 64px;"></div>

Jar

ignorer "Jar" - Ved ikke lige hvor dét kom fra. :o)

Havde allerede udtænkt det du nævner med at lade serveren skrive værdien/ID'et i javascriptet.

<?php
if (isset($p)) {
    echo '<script>window.onload = function(){ oActiveLink = document.getElementById("'. $p .'"); }</script>';
}
?>

Du skal stadig erklære variablen globalt. Så burde det virke  =)

<script type="text/javascript">
var oActiveLink = null;
var oStyles = {
    on: {
        background: "yellow",
        color: "red"
    },
    off: {
        background: "#efefef",
        color: "#000"
    }
};
function setActiveLink(oLnk) {
    var css;
    if (oActiveLink) {
        css = oActiveLink.style;
        for (var x in oStyles.off) css[x] = oStyles.off[x];
    }
    oActiveLink = oLnk;
    css = oActiveLink.style;
    for (var x in oStyles.on) css[x] = oStyles.on[x];
}

window.onload = function(){
    oActiveLink = document.getElementById("p_arkiv");
}
</script>

Er ikke sikker på hvad du mener med globalt :)

Har prøvet at kopiere ovenstående ind i både <body> ... </body> og <head> .. </head>

Det virker fint når jeg klikker på dem - Der er bare intet menu-punkt valgt når siden for eks. åbnes første gang.

Så må du lægge et link til forsøget. Muligvis sætter du en onload et andet sted - og overskriver dermed den, vi har lavet her. Hvis du har noget:
    <body onload="fooBar()" ...>

- eller i en eller anden JS-kode/JS-fil:
    window.onload = fooBar;

- eller:
    window.onload = function(){
        fooBar();
    }

- så erstat det med:
    window.onload = function(){
        fooBar();
        oActiveLink = document.getElementById("p_arkiv");
    }

Du erklærer en variabel som global, når du - udenfor alle funktioner - erklærer den med var:

<script type="text/javascript">
var oActiveLink = null;
... osv ... osv ...

Sad og læste lidt her:
http://bytes.com/groups/javascript/150420-getelementbyid-doesnt-work-onload

Det fik mig til at tænke på - Det nytter jo ikke at sætte oActiveLink til noget, uden at kalde funktionen som laver den style om bagefter :)

Dette virker perfekt:

window.onload = function() {
    setActiveLink(document.getElementById("p_arkiv"));
};

Ole, smid du endelig et svar. :D

Det kommer her  =)

...og jeg takker for hjælpen :)

Kan være at jeg opretter et nyt emne igen inden længe, da jeg pt. ikke lige kan gennemskue hvordan jeg får javascriptet til at ligge i en ekstern fil, og så samtidig vælge hvilken farve tab'et skal have, ud fra hvilken .css fil der er inkluderet. :)

Selvtak og tak for points. Det andet må vi se på til den tid  ;o)