#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    active navigation state w/JavaScript


    In the following file I have a simple list of nav links. They all have rollovers and it is set to change to an active state(yellow) when it is clicked. However, only one nav item should be active(yellow) at any given time, which it currently isn't. It should perform the same way the active state works in CSS except in CSS when you click anywhere else on the page and loose focus you loose the active state. Any help would be greatly appreciated.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <style>

    a.MainNav:link {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    }

    a.MainNav:visited {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    }

    a.MainNav:active {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #FFFF00;
    text-decoration: none;
    }

    a.MainNav:hover {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #92B7D1;
    text-decoration: none;
    }





    a.activenav:link {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #FFFF00;
    text-decoration: none;
    }

    a.activenav:visited {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #FFFF00;
    text-decoration: none;
    }

    a.activenav:active {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #FFFF00;
    text-decoration: none;
    }

    a.activenav:hover {
    font-family: arial, tahoma, verdana;
    font-size: 11px;
    font-weight: bold;
    color: #FFFF00;
    text-decoration: none;
    }
    </style>

    </head>

    <body bgcolor="#000000">


    <a href="#" onclick="this.className='activenav';" class="MainNav">Link 1</a> <br>
    <a href="#" onclick="this.className='activenav';" class="MainNav">Link 2</a> <br>
    <a href="#" onclick="this.className='activenav';" class="MainNav">Link 3</a> <br>
    <a href="#" onclick="this.className='activenav';" class="MainNav">Link 4</a> <br>
    <a href="#" onclick="this.className='activenav';" class="MainNav">Link 5</a> <br>
    </body>
    </html>
    Last edited by onvio; June 26th, 2003 at 01:01 PM.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    onvio...

    While I appreciate the vote of confidence, this isn't my board or my site, and there is a backchannel (PM) for private correspondence, although I'd prefer if it was reserved for follow-ups and personal comments. I make it a practice to not respond to personal requests posted in this forum, and I hope others follow this practice.

    Please amend your original post to something more generic, or delete it.

    thanks, adios

IMN logo majestic logo threadwatch logo seochat tools logo