Dynamically change CSS of link based on current page

Question

I have the following links at the top of my web page:

 


      
The World of         


        

Answer 1

You can check each link and see if it matches the current location. This can be more or less advanced depending on your needs, but something like:

var loc = window.location.pathname;

$('.icyLink').find('a').each(function() {
  $(this).toggleClass('active', $(this).attr('href') == loc);
});

Then style the active class in your CSS:

.icyLink a.active{color:#fff}