How do I keep a menu link highlighted (as bold and blue) after clicking on it?

Question

I've got a header menu on my page (www.wortwaerts.net) that works fine on the basis of the code below apart from one issue I could not find a solution for so far: I'd like the menu link that was clicked last to stay highlighted (bold and blue) until another link is chosen which will then be highlighted in the same way. I've already studied some related requests/ answers on this page but couldn't implement the advices successfully (most included javascript) - I'm really a starter as to web development and would be very happy about any hint described in a "foolproof" way ;o)

Thanks a lot for your ideas! Cheers, Felix

#screen > header a{
   color:#000 !important;
   display:block;
   text-decoration:none
}

#screen > header a:hover{
   color:#19175C !important;
   text-decoration:none;
   font-weight:bold;
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
   background-size:.25em .375em;
   -moz-background-size:.25em .375em;
   -webkit-background-size:.25em .375em;
   font-weight:bold;
   margin-left:-.75em;
   padding-left:.75em
}

#screen > header strong a{
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
   background-size:.25em .375em;
   -moz-background-size:.25em .375em;
   -webkit-background-size:.25em .375em;
   font-weight:400;
   margin-left:-.75em;
   padding-left:.75em
}

.ielt8 #screen > header strong a{
   background-image:url(assets/img/bg-bullet.png)
 }

Solution 1

You will need to use JavaScript for this; there is no CSS pseudo-class that will keep an element in a special state until another link is clicked. Focus is closest to what you want, but focusing other form elements or even tabbing through links would break it.

If you were using jQuery you could do something like this:

# In your CSS
#screen > header a.current {
  /* special style just for the current one */
}

# In your JavaScript
jQuery(function($){
  var headerAnchors = $('#screen > header a').click(function(){
    headerAnchors.removeClass('current');
    $(this).addClass('current');
  });
});

Solution 2

This is an example for how to create css for links. Try it with your class/id names

 <style type="text/css">
    a:link {
        color: #06F;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #F00;
        font-weight:bolder;
    }
    a:hover {
        text-decoration: underline;
        color: #990;
    }
    a:active {
        text-decoration: none;
        color: #93F;
        font-weight:bolder;
    }
    </style>

Solution 3

The :active class is applied to a link when a user clicks on it. It will remain until the user releases the mouse and the new page loads, or until they click on another link.

a:active { color: red; font-weight: bold; }

Solution 4

In your css you can use the :visited pseudo class

a:visited { color: /* your colour */ }

View more solutions