Changing the background color of a link after being clicked

Question

I'd like to ask how to change the background color of each link (the rectangular shape surrounding it) to one different color after a link is clicked, and the other links still remain in its original background color .

Each link corresponds to one div placed in the same html file (that I didn't include here).

The point is to let the viewers know which link they are at. By the way, if it is okay I'm looking for the fastest code possible ^_^ (pure css , javascript or jQuery ). Appreciate all suggestions!

the highlight only applied to the current link only! (the others will have the normal colors)

<div id="Navigation">
<div id="nav_link">
  <ul id="MenuBar" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="javascript:showonlyone('Index_frame');" >Home</a>
      <ul>
        <li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
        <li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
        <li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
        <li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
       </ul>
    </li>
    <li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
    <li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
    <li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
    <li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
    </ul>
</div>
  <!--End of nav_link-->
</div>
<!-- End of Navigation-->

---

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(1000).fadeIn(500);
          }
          else {
               $(this).hide(1500).fadeOut(500);
          }
     });
}

---

EDITED

Guys, there is this one thing that I'm still stuck at even though I spent time on it a lot, I added some more JavaScript links the same with the above in the page with the idea that these new links will be functional just like the former. That is being clicked on ==> the highlight will appear only on these Navigation links. I tried to modify the function from jjurm like this

$(function(){
    $("#MenuBar a,#colOne a").bind("click", function(){
        var names=$(this).attr('name');
        $("#MenuBar a").removeClass("clicked");
        $("#MenuBar a[name='names']").addClass("clicked");

    });
});

It didn't work and neither did the old ones that used to work

Answer 1

In a similar question to yours I once found out that only changes in text color are allowed some properties can be changed if you use a:visited pseudo-class (UPD: and background-color is one of them). But since your links are javascript links, the :visited selector will not work, hence you cannot do it as a pure CSS solution. You will have to use some kind of javascript. If jQuery is ok, you can try this:

$('a').on('click', function(){$(this).css("background-color","yellow");});

Perhaps you can change the "showonlyone" function? Then you could add the background changing code to it.

Answer 2

You can do this by simple css code:

#MenuBar a:visited {
    background: yellow;
}

Edit:

As far as this doesn't work with javascript links (but I haven't tried it), there is other solution with jQuery and CSS.

jQuery code:

$(function(){
    $("#MenuBar a").bind("click", function(){
        $(this).addClass("clicked");
    });
});

CSS:

#MenuBar a.clicked {
    background: yellow;
}

Edit2:

Ok, if you want to keep highlighted only last clicked element, it's enough to add this simple line to javascript code:

$(function(){
    $("#MenuBar a").bind("click", function(){
        $("#MenuBar a").removeClass("clicked"); // Remove all highlights
        $(this).addClass("clicked"); // Add the class only for actually clicked element
    });
});

Edit3:

If you want to have more links that point to same location and to highlight all of them if one is clicked, follow this:

$(function(){
    // Assume that your 'a' elements are in #MenuBar and #colOne
    $("#MenuBar a, #colOne a").bind("click", function(){
        // Remove all highlights
        $("#MenuBar a, #colOne a").removeClass("clicked");

        // Store the name attribute
        var name = $(this).attr("name");

        // Find all elements with given name and highlight them
        $("#MenuBar a[name='"+name+"'], #colOne a[name='"+name+"']").addClass("clicked");
    });
});

Answer 3

$('#MenuBar').on('click', 'a', function() {
    $(this).css('background-color', '#bada55');
});

or if you need unique colors you can use the data-attribute.

<a href="#" data-color="#bada55"></a>

$('#MenuBar').on('click', 'a', function() {
    var $elem = $(this);
    $elem.css('background-color', $elem.data('color'));
});

I'd recommended adding classes instead and using css to define styles.

$('#MenuBar').on('click', 'a', function() {
    $(this).addClass('clicked-menu-link');
});

edit: To remove the other clicks use:

$('#MenuBar').on('click', 'a', function() {
    var fancyClass = 'clicked-menu-link';
    $('#MenuBar a').removeClass(fancyClass).filter(this).addClass(fancyClass);
});

Answer 4

You can add an active class to the clicked anchor. Using live NodeList should work really fast as you also need to unselect previously selected item:

var a = document.getElementById('Navigation').getElementsByClassName('active');

$('#Navigation').on('click', 'a', function() {
    if (a[0]) a[0].className = '';
    this.className = 'active';
});

http://jsfiddle.net/vBUCJ/

Note: getElementsByClassName is IE9+ if you need to support older versions use jQuery:

var $a = $('#Navigation a');
$('#Navigation').on('click', 'a', function() {
    $a.removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/vBUCJ/1/