Skip navigation
Currently Being Moderated

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

Aug 8, 2012 7:40 AM

Tags: #css

By default, the 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 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?



  • Currently Being Moderated
    Aug 8, 2012 8:26 AM   in reply to jyeager11

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


    Mark as:
  • Currently Being Moderated
    Aug 8, 2012 8:44 AM   in reply to jyeager11

    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:
  • Currently Being Moderated
    Aug 8, 2012 10:07 AM   in reply to jyeager11

    Consider this code -


    <!doctype html>



    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style type="text/css">

    .foo {

              color: red;

              font-weight: bold;







    <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>



    Mark as:

More Like This

  • Retrieving data ...

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