Styling :active state on a link

Question

I'm just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.

The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it's getting on my nerves.

CSS Code:

ul.nav_style{list-style: none;}

ul.nav_style li {padding-left: 1em; text-indent: -.7em;}

ul.nav_style li:before {
    content: "•  ";
    color: #C0C0C0; /* or whatever color you prefer */
}

ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}​

HTML Code:

<ul class="nav_style">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

Thanks in advance.

Chris

Answer 1

Problem solved, I've decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.

PHP CODE:

if($title == "Enter"){

              $enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
              $enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");

              echo '<ul class="nav_style">';
              for($i=0; $i<sizeof($enterArrayPages); $i++){

                if($proper_title == $enterArrayText[$i]){
                  echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
                else{
                  echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
              }
              echo '</ul>';
            }

So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.

Here is the CSS:

a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited  { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover  { color: #E6BD13; text-decoration: none; }

.linkChange {
   color: #E6BD13;
   text-decoration: none;
}

It's really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.

Here is an image of the code output:

Thanks for everyones comments! Much appreciated!

Answer 2

The explanation is simple: all the links have the same href. Assuming you will change the hrefs, this will not be an issue on your final site. :)

See my fiddle. All I did was to change the hrefs. Does it work as you expect now? http://jsfiddle.net/TheNix/sR3Ub/3/

EDIT:
Now, if you simply wish to make sure the link looks the same regardless if it's been visited or not, all you have to do is to apply the same styling to the :link and :visited states, like so:

ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}

Now the link should be grey when idle (even if it's been visited), darker grey when you hover over it, and gold when you click it. See fiddle: http://jsfiddle.net/TheNix/sR3Ub/5/

EDIT v2
It seems you are a little bit confused about the states of a link, so here's the low-down:

:link is the standard idle link (can also be targeted simply as a)
:hover is the act of hovering over the element with the cursor.
:visited is applied to links which have already been visited.
:active is the state when the link is active in the user interface — e.g. when you are hovering over it, and pressing left mouse button (onmousedown), or when using the TAB to highlight the link. When you release the mouse button (onmouseup) or tab out, it will revert back to it's previous state.

:active therefore have nothing to do with determining if it is the active page, it only applies when you hold the mouse button down.

What you are trying to do, is unfortunately not possible with CSS alone. Here is a simple example of how it can be achieved with jQuery. http://jsfiddle.net/TheNix/sR3Ub/6/

Answer 3

you must put target url in href or in data-href or etc,and after click in link and load new page you must check window location and set link color to red:

$(function(){
   var url = window.location.href;
   $("ul.nav_style li").each(function(i,e){
      var $this = $(e);
      if ($this.attr("href") == url){
         $this.css("color","red");
      }
   };
});

Answer 4

This may be a reason of security of browsers, http://dbaron.org/mozilla/visited-privacy Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ also informed about this. Most of latest browsers has taken this action to protect the users.