Forum » Javascript » Active menu class verwijderen

  1. Scooterboy

    Ik heb een menu in HTML met de home pagina met een active class zodat deze onderstreept is. Nu moet het mogelijk zijn dat als je over een ander menu item gaat met de muis, dat deze active class van home wordt weggehaald, dus zonder onderstreping.

    Dat kan met Javascript, maar ik weet niet hoe Wie kan me op weg helpen?

    do 07-10-2010 om 19:51
Reacties (3)

Reageren
  1. Stb

    Heb even zitten puzzelen, zie hier het resultaat.

    De volledige code, welke genoeg moet zijn om jou op weg te helpen:

    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <title>Test Document</title>
    <style type=\"text/css\">
    ul#menu li a
    {
        text-decoration: none;
        font-family: Verdana, Geneva, sans-serif;
        color: #09f;
    }

    ul#menu li a:hover,
    ul#menu li a.active
    {
        text-decoration: underline
    }

    ul#menu li a.normal
    {
        text-decoration: none;
    }
    </style>

    <script language=\"javascript\" type=\"text/javascript\">
    function activeOff()
    {
        document.getElementById(\'active\').className = \'active normal\';
    }

    function activeOn()
    {
        document.getElementById(\'active\').className = \'active underlined\';
    }
    </script>
    </head>

    <body>
    <ul id=\"menu\">
    <li><a href=\"home.html\" class=\"active underlined\" id=\"active\">De actieve link</a></li>
    <li><a href=\"link2.html\" onmouseover=\"activeOff();\" onmouseout=\"activeOn();\">Een niet actieve link</a></li>
    <li><a href=\"link3.html\" onmouseover=\"activeOff();\" onmouseout=\"activeOn();\">En nog een niet actieve link</a></li>
    </ul>
    </body>
    </html>



    Kleine uitleg. De actieve link moet de CLASS \"active\" en \"underlined\" hebben. Je koppelt twee verschillende classes door er simpelweg twee te noemen, gescheiden door een spatie. (\"active underlined\")
    In dit voorbeeld doet de class \"underlined\" niets, maar dat is ook niet nodig.
    Daarnaast moet de actieve link het ID \"active\" dragen.

    Alle andere items, die dus niet actief zijn, dienen de code met \"onmouseover\" en \"onmouseout\" te bevatten. De JavaScript functies bovenin de pagina doen vervolgens de rest.
    Zodra je met je muis over een niet actief punt gaat, koppelt hij er dan een andere class aan, welke de naam \"normal\" draagt.
    Die classe heb ik in de stylesheet (in dit geval tussen STYLE-tags) wel aangemaakt en de opdracht gegeven om er geen lijn onder te zetten. (text-decoration: none)

    De overige classes zijn in principe enkel voor de stijl en zijn niet van belang voor een goede werking, dus daar mag je mee doen wat je wil. Zorg wel voor een goede volgorde: de class die het lijntje weghaalt (de \"normal\" in dit geval) moet altijd ONDER de class staan die het lijntje toevoegt. Anders wordt de regel overschreven en zie je nog niets...

    Succes!

    do 07-10-2010 om 22:33
  2. Scooterboy

    Beste Stb,

    Ziet er geweldig uit en precies wat ik nodig had, die lange omschrijving had niet gehoeven maar wel fijn.

    Super!

    vr 08-10-2010 om 11:00
  3. Stb

    Quote: scooterboy

    Beste Stb,

    Ziet er geweldig uit en precies wat ik nodig had, die lange omschrijving had niet gehoeven maar wel fijn.

    Super!


    Graag gedaan. En sorry, ik kan van tevoren nooit ruiken hoeveel ervaring iemand heeft. Dus kan ik beter teveel info geven i.p.v. te weinig.

    vr 08-10-2010 om 14:02
Reageren