Selecting a HTML link causing CSS elements to change colours?

Question

Is there a way (possibly using Javascript?) of changing CSS element details when a User clicks an HTML link?

My aim here is to grey out a series of links defined as:

<a href="#" title="MyLink"><span>Link</span></a>

and a class defined as:

.Document
{
    background:#000;
}

What I am after is, when the User clicks MyLink, I would like the Document class to change its background to something else.... say #CCC. I would also like it to revert back to its original state when another link is selected e.g. MyLink2.

Is this even possible? If so does anyone know where to look for at least the beginnings of a solution?

Answer 1

<a href="#" title="MyLink" onclick='document.body.style.background="#CCC";'>Link</a>

Answer 2

jQuery! - http://jquery.com/

$("your-selector").click(function(){
    $("your-destination").css("border-color","#CCC");
});

Apply for each link, and it should do it!

Answer 3

You could use the :focus CSS pseudo-selector:

a:focus {
  background-color: #ccc;
}

Now when the user clicks on a link, the background will go grey.

Answer 4

I assume the .Document classname is applies to a number of other elements & not the link itself.

In this case, the best practice is to create another classname (for example, .document-active), and change the classname on all the elements that .Document is applied to when MyLink is clicked.

Using your markup above (and jQuery):

$(function(){
  $("a[title='MyLink']").click(function(){
    $('.Document').removeClass('Document').addClass('document-active');
    return false;
  });
});