css and js to change navigation links

Discussion in 'Javascript' started by Andrea, Feb 24, 2004.

  1. Andrea

    Andrea Guest

    Hi everyone. I'm working on a navigation menu (in a frameset) that I
    want to set the "active" link to black (the link that corresponds to
    the page displayed in the right side of the frame) to black.


    In the original external style sheet, I set the a:link, a:visited,
    a:active, and a:hover. That works fine.

    In the navigation page, I call a function for onclick - it sets the
    link just clicked to black:


    AND sets the link that was black back to the original color:


    The problem is then I lose the "hover" feature. I've tried instead of
    setting the "color" in the function actually setting "a:link.color",
    "a:visited.color", etc. (for link, visited, active, and hover) but it
    doesn't work AND I read in this ng that you can't use a javascript
    function to change a pseudo class. Is that true?

    Here's the site: http://www.personal.psu.edu/axg251/wc

    Note that the "hover" works until you've clicked on the link - then
    it no longer works.

    Any ideas are appreciated. I'm happy to post all the code here - I
    thought it would be easier for you to just look from the site - if
    not, just let me know.

    Thanks for your help!
    Andrea :)

    p.s. It's a test site - I *know* it's ugly! ;-)
    Andrea, Feb 24, 2004
    1. Advertisements

  2. Andrea

    Andrea Guest

    I apologize for multi-posting. I wan't sure how to cross post - I'll
    look into it for the next time I post.

    I hope people will still respond with ideas if you have them on my
    css/js issue.

    Andrea, Feb 24, 2004
    1. Advertisements

  3. R

    R Guest

    There's a nice (less javascript, more css) way to do this:

    I have simplified your code to just include the stuff important to
    your problem, and have moved the css inline just for explanation

    background-color: #FFFFFF;
    font-family: Verdana, Helvetica, Arial, "Sans Serif";

    /*create two different classes 'selected' and 'unselected'. They will
    define the two states of your links*/
    ..selected, .selected:link, .selected:visited, .selected:active,
    color: black;font-weight: bold;text-decoration: none;
    ..unselected, .unselected:link, .unselected:visited, .unselected:active
    color: #394B8E;font-weight: bold;text-decoration: none;
    color: #00B4FF;
    <script type="text/javascript">
    var oldClass=null
    //when a link is selected simply change is class to 'selected'. Also
    change the old link to 'unselected'.
    // the null check is just to prevent the oldclass from being updated
    when the page first loads
    function changelink(navItem) {
    if (oldClass != null){
    oldClass.className = "unselected"
    navItem.className = "selected"
    <!-- set the default class to 'unselected' and when clicked just pass
    the whole object 'this' -->
    <a class="unselected" target="workshop_home" id="homepage"
    href="content.html" onClick="changelink(this);">Home</a><br>
    <br />
    <a class="unselected" target="workshop_home" id="PSU"
    href="http://www.psu.edu" onClick="changelink(this);">PSU</a> <br>
    <a class="unselected" target="workshop_home" id="w3"
    href="http://www.w3schools.com" onClick="changelink(this);">w3</a>
    <a class="unselected" target="workshop_home" id="WC"
    onClick="changelink(this);">World Campus</a><br>
    <a class="unselected" target="workshop_home" id="Page2"
    href="page2.html" onClick="changelink(this);">Page2</a><br>
    R, Apr 1, 2004
  4. R wrote:
    > There's a nice (less javascript, more css) way to do this:

    There is no more or less JavaScript/CSS involved than with my
    solution, you are simply using another CSS-related property.

    > I have simplified your code to just include the stuff important to
    > your problem, and have moved the css inline just for explanation
    > purposes:
    > [...]
    > function changelink(navItem) {
    > if (oldClass != null){
    > oldClass.className = "unselected"
    > }else{
    > window.alert('notyet')


    > }
    > navItem.className = "selected"
    > oldClass=navItem;

    > }

    The only problem is that assigning to the "className" property
    does not work in all DHTML capable browsers, while assigning to
    a specific format property, like "color" does. Besides, you
    replied to my posting, without any reference to its content.
    Please read <http://www.allmyfaqs.com/faq.pl?How_to_post>, thanks.

    Thomas 'PointedEars' Lahn, Apr 2, 2004
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. msnews.microsoft.com
    Steven Cheng[MSFT]
    Apr 22, 2004
  2. Hardeep Rakhra
    Hardeep Rakhra
    Jan 12, 2004
  3. Laurahn
    Steven Cheng[MSFT]
    Feb 6, 2007
  4. Zeba
  5. msnews.microsoft.com

    Calendar Control: Changing the Month Display and Navigation Links

    msnews.microsoft.com, Apr 19, 2004, in forum: ASP .Net Web Controls
    Steven Cheng[MSFT]
    Apr 20, 2004

Share This Page