0

When i click on a link, its color should change, and it should be same until i press other link, How to do using "active"?? I tried, Its color changes when i click on it, But it gains its original color!

    <html>
    <head>

    <style>

    a
    {
        display:block;
        height:5%;
        width:10%;
        background-color:#96C;  
        border: solid #96C 1px;
        margin-top:5px;
    }

    a:hover
    {
        background-color:#666;
    }

    a:active
    {
        background-color:#C99;
    }
    </style>


    </head>

    <body>

    <a href="#">Home</a>

    <a href="#">Sign in</a>
    <a href="#">Sign up</a>
    <a href="#">Exit</a>


    </body>
    </html>
Darshn
  • 1,512
  • 1
  • 23
  • 31

4 Answers4

0

The :active pseudo selector is only active for the brief moment when the link is clicked.

You can read more here.

In order to get the link to stay the same color you should use a class which you can name and implement it on the link for the page you are currently on.

Here is a link to another thread asking essentially the same question.

Community
  • 1
  • 1
JKFrox
  • 185
  • 1
  • 1
  • 9
0

You can use javascript (in my case jQuery) to assign the class to the "active" link. See this fiddle.

HTML

<a href="#">Link 1</a>
<a href="#">Link 2</a>

CSS

a { color: green; }
.active { color: orange; }

jQuery

$('a').on('click', function() {
   $('a').removeClass();
    $(this).addClass('active');
});
dlane
  • 1,131
  • 7
  • 7
0

That's not what :active pseudo class was meant to do. You can use javascript for this. If you use jQuery, than you can do something like:

var items = $("a");
items.on("click",function(){
  items.removeClass("active");
  $(this).toggleClass("active");
});

and add "active" css rule

a.active {
 background-color:#C99;
}

See fiddle http://jsfiddle.net/QQb27/

longchiwen
  • 822
  • 6
  • 11
-1

Modified version of dward's answer to include your stylings: http://jsfiddle.net/zEwUY/1/

a:hover = Hovering over it.

a:active = Holding your mouse down on the link

a:visited = What it will look like if you have been there before.

SimplyAzuma
  • 25,214
  • 3
  • 23
  • 39