Skip navigation
jyeager11
jyeager11
Currently Being Moderated

How to you keep "active" pseudo-class, well, active?

Aug 8, 2012 7:40 AM

Tags: #css

By default, the a.link:active state is shown only for as long as the button on the mouse is pressed. When you let go, it reverts back to the regular a.link state.

 

How do I make the active state STICK? In other words, in a navigation menu that is permanently on the screen, I want the active state to stick permanently (until another button is pushed).

 

How is this accomplished?

 

Thanks!

1750 Views   7 Replies   Latest reply: jyeager11, Aug 10, 2012 6:02 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Aug 8, 2012 8:26 AM   in reply to jyeager11
    Report

    It's very simple and has nothing to do with a:active.

     

    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    2. jyeager11,
    Aug 8, 2012 8:32 AM   in reply to MurraySummers
    Report

    This only works if I'm using multiple web pages (because it relies on individual changes to the body tag). I'm actually using the navigation menu to hide/unhide various divs, no other webpage gets loaded.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Aug 8, 2012 8:44 AM   in reply to jyeager11
    Report

    That's a very very bad approach, just so you'll know.  Nevertheless, you will have to do what you want using some tiny bit of custom javascript.  Can you post a link to the live page so that we can see what you have and write the proper code for you?

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    4. jyeager11,
    Aug 8, 2012 9:45 AM   in reply to MurraySummers
    Report

    'fraid not, it's all still at the local stage. I can tell you however that I am using <a> as a block object with defined height/width, and background-position switch between regular and active states.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    5. MurraySummers,
    Aug 8, 2012 10:07 AM   in reply to jyeager11
    Report

    Consider this code -

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style type="text/css">

    .foo {

              color: red;

              font-weight: bold;

    }

    </style>

    </head>

     

     

    <body>

    <p><a id="num1" href="#" onclick="this.className='foo';document.getElementById('num2').classNa me='';">Foo</a></p>

    <p><a id="num2" href="#" onclick="this.className='foo';document.getElementById('num1').classNa me='';">Foo</a></p>

    </body>

    </html>

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    6. jyeager11,
    Aug 9, 2012 2:17 PM   in reply to MurraySummers
    Report

    Hmm, this code only seems to work on IE. On Firefox, it goes red on click but doesn't stay red.

     

    Also, there should only be one lit up at a time. That's why I liked the idea of making the ACTIVE pseudo-class sticky. There can only be one at a time.

     

    Any alternatives to propose?

     
    |
    Mark as:
  • jyeager11
    Currently Being Moderated
    7. jyeager11,
    Aug 10, 2012 6:02 AM   in reply to jyeager11
    Report

    (bump) Anyone..?

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Incoming Links

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points