Et link skal være anderledes, hvis linket er til nuværende side

Du kan ikke med 'almindelig' HTML få siden til automatisk at skifte sektion i menuen alt efter hvor på siden man er. Du kan manuelt gå ind på dine sider (ex. kontakt.html) og tilføje en class til den aktuelle sektion. Ex:

<style type="text/css">
a { color: #333; text-decoration: none }
a.section { color: #666; text-decoration: underline }
</style>

Og i din kontakt.html så tilføje på dit a-tag: class="section".

Ellers kan du med php/asp lave noget mere simpelt. Men det er "slavemetoden" med standard HTML ;-)

<ole>

Det er en oplagt serveropgave  ;o)

/mvh
</bole>

okay, jeg skal nok smide point til dig ssv, men havde tænkt den tanke der, kan dog ikke helt få det til at virke når menuen allerede ligger i en template, som har eget stylesheet... (Gerne lige en kommentar til det) og måske du lige kunne smide en ide til at gøre det i php, da jeg også har lidt kendskab til det, men bestemt ikke meget...

Man kan godt lave det clientside med JavaScript.

Du indkluderer en .js fil via templaten (eller hvordan du nu vil gøre det).

Denne .js fil indeholder en funktion der afvikles ved sidens load (f.eks. window.onload).

Når funktionen afvikles, løber den igennem samtlige links på siden.

Den checker så linksne, et ad gangen, om dets href er svarer til den nuværende sides adresse/filnavn (med window.location.href).

Hvis ja, tilføj underline til linkets style.

Stavefejl og elendig grammatik er gratis.. sengetid.. :-)

et spørgsmål til dig thesurfer, hvis jeg indkluderer en .js fil og efter den så har tjekket linkene, hvordan får jeg så den fil til at ændre stilen på et link ?

Elementers attributter findes typisk under "style" på referencen til elementet.

Søg f.eks. på "css javascript" i søgemaskine, og du vil falde over sider som ligner denne her:

http://codepunk.hardwar.org.uk/css2js.htm

Her kan du se hvad CSS-attributter hedder i JavaScript.

F.eks., hvis linkets tekst skal være rødt (koden for rød er "#ff0000"):

- CSS:  style="color: #ff0000"

- java script:  style.color = "#ff0000"


Eksempel hvor teksten på et link (via en reference) skifter til farven rød ("#ff0000"):

reference_til_linket.style.color = "#ff0000";


Den kode du har brug for, kan f.eks. være:

function checklinks() {

    /* adressen på nuværende side */
    loc = window.location.href.toLowerCase();

    /* samlingen der indeholder sidens links */
    lnx = document.getElementsByTagName("a");

    /* loop der løber samtlige links igennem */
    for (i = 0, len = lnx.length; i < len; i++)
    {
        /* opret et reference til det link vi er nået til, spar ressourcer på opslag */
        lnk = lnx[i];

        /* sammenlign sides URL med linkets HREF (/URL) */
        if (lnk.href.toLowerCase()==loc)
        {
            /* hvis man kommer her ind, er det fordi linket peger på nuværende side */

            /* gør linket understreget */
            lnk.style.textDecoration = "underline";
        }
    }

}


Grunden til at jeg har brugt "/*" og "*/" til kommentarer, i stedet for "//", er:

Hvis man

- erstatter  "function checklinks() {"  med  "java script:"

- erstatter den sidste  "}"  med  "void(0)"

kan man smide koden ind i adressenlinie i browseren Opera, hvorefter koden bliver afviklet.

Hvis man vil prøve det i Firefox eller Internet Explorer, skal man fjerne linieskift, så det står på 1 linie som her:

java script: loc = window.location.href.toLowerCase(); lnx = document.getElementsByTagName("a"); for (i = 0, len = lnx.length; i < len; i++) { lnk = lnx[i]; if (lnk.href.toLowerCase()==loc) { lnk.style.textDecoration = "underline"; } } void(0)


Overskriften i dette spørgsmål skulle så gerne blive understreget, da det peger på nuværende side.

HUSK: Hvis du vil teste det på en side på eksperten.dk, skal du sørge for at overskrift-linket ikke peger på noget med en session. Det gør du vist ved at klikke på overskriften/linket.

Selvom denne kode vises som 2-3 linier i indlæg på eksperten.dk, skal koden bruges i 1 linie:


java script: loc = window.location.href.toLowerCase(); lnx = document.getElementsByTagName("a"); for (i = 0, len = lnx.length; i < len; i++) { lnk = lnx[i]; if (lnk.href.toLowerCase()==loc) { lnk.style.textDecoration = "underline"; } } void(0)



Jeg ved ikke hvordan du bruge template, men den eksterne .js fil kan nøjes med at indeholde:


// --- Understreg links der peger på nuværende side

window.onload = function()
{
    checklinks();
}

function checklinks() {

    /* adressen på nuværende side */
    loc = window.location.href.toLowerCase();

    /* samlingen der indeholder sidens links */
    lnx = document.getElementsByTagName("a");

    /* loop der løber samtlige links igennem */
    for (i = 0, len = lnx.length; i < len; i++)
    {
        /* opret et reference til det link vi er nået til, spar ressourcer på opslag */
        lnk = lnx[i];

        /* sammenlign sides URL med linkets HREF (/URL) */
        if (lnk.href.toLowerCase()==loc)
        {
            /* hvis man kommer her ind, er det fordi linket peger på nuværende side */

            /* gør linket understreget */
            lnk.style.textDecoration = "underline";
        }
    }

}

// --- kode slut

Ah det er enkelt og smukt :D jeg er helt med... smid et svar thesurfer så accepter jeg... i javascript hvis det er et billede der skal udskiftes med et andet, istedet for en dekorering af linket, hvad er funktionen så?... det kan jeg måske egentlig bare se i biblioteket nu hvor jeg lige sidder og tænker mig om :)

Eksempel der skifter "e"-logoet (til Google-billede) hvis man er på adressen http://www.eksperten.dk/ (da logoet linker til adressen)


java script:
   
    /* adressen på nuværende side */
    loc = window.location.href.toLowerCase();

    /* samlingen der indeholder sidens links */
    lnx = document.getElementsByTagName("a");

    /* loop der løber samtlige links igennem */
    for (i = 0, len = lnx.length; i < len; i++)
    {
        /* opret en reference til det link vi er nået til, spar ressourcer på opslag */
        lnk = lnx[i];

        /* undersøg om dette link indeholder mindst 1 node */
        if (lnk.childNodes.length > 0)
        {

            /* sammenlign sides URL med linkets HREF (/URL) */
            if (lnk.href.toLowerCase()==loc)
            {
                /* hvis man kommer her ind, er det fordi linket peger på nuværende side */

                /* gør linket understreget */
                lnk.style.textDecoration = "underline";

                /* opret en reference til den første node, spar ressourcer på opslag */
                elm = lnk.childNodes[0];

                /* check om den første node er af typen "img", dvs., et billede */
                if (("" + elm.tagName).toLowerCase() == "img")
                {
                    /* hvis man kommer her ind, er det fordi linket peger på nuværende side */

                    /* skift adressen/url/src på billedet */
                    elm.setAttribute("src", "http://www.google.com/images/nav_logo3.png");
                }
            }
        }   

    }

void(0)


Og som 1 linie:

java script: loc = window.location.href.toLowerCase(); lnx = document.getElementsByTagName("a"); for (i = 0, len = lnx.length; i < len; i++) { lnk = lnx[i]; if (lnk.childNodes.length > 0) { if (lnk.href.toLowerCase()==loc) { lnk.style.textDecoration = "underline"; elm = lnk.childNodes[0]; if (("" + elm.tagName).toLowerCase() == "img") { elm.setAttribute("src", "http://www.google.com/images/nav_logo3.png"); } } } } void(0)


Det skal lige siges, at koden virker i Opera og Mozilla Firefox.. men ikke i Internet Explorer..

Svar

<ole>

Her virker den også fint i IE7. Har ikke testet i IE8  =)

/mvh
</bole>

Virker også i IE8  =)