You have to use :visited
selector. Something like this will work well :
#crumbs ul li a:visited {
background-color: #fa5ba5;
}
#crumbs ul li a:visited:after {
border-left-color: #fa5ba5;
}
And the JS Fiddle : Demo
EDIT (Full JS method):
You can find the full JS demo in the JSFiddle here.
In onclick
event, there is a loop which remove class .onclick
from previous active link.
Code provided must be improved, it's just to show you it can work.
I highly recommend you to use a library like jQuery, because DOM manipulation in native JS code is very boring.
To show you the difference, with jQuery you would have to do this :
HTML Code :
<div id="crumbs">
<ul>
<li><a class="link" href="#1">One</a></li>
<li><a class="link" href="#2">Two</a></li>
</ul>
</div>
JS Code :
$('.link').on('click', function() {
$('.onclick').removeClass('onclick'); // Remove class from previous active link
$(this).addClass('onclick'); // Add class to new active link
});