Dynamically change CSS of link based on current page

Question

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

 <ul class="icyLink">

      <li><a class="nav1" href="index.html">The World of Icengale</a></li>
      <li><a class="nav1" href="history.htm">History of Icengale</a></li>
      <li><a class="nav1" href="calendar.htm">Time & Calendar of Icengale</a></li>

 </ul>

The color of each link is blue and each <li> has as a background image (background-image: url('../images/blue2.jpg').

What I would like to do is dynamically change the css of an individual link based on the current page. For example, if someone is on the history.htm page then the color of the link will change to white and the background image will change to another (in this case, "blue3). The css for all of the other links would remain the same. How would I do this?

As always, any and all help is greatly appreciated!

Take care and have a great day....

ciao, john.

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}

Answer 2

You are looking for jQuery .css or .addClass functions.

Answer 3

Set a unique body id in each page and an id on each menu item then:

#home-page #home-menu,
#history-page #history-menu { background: blue; } // Etc....

Answer 4

<ul class="icyLink">

  <li><a class="nav1" href="index.html">The World of Icengale</a></li>
  <li><a class="nav1" href="history.htm">History of Icengale</a></li>
  <li><a class="nav1" href="calendar.htm">Time & Calendar of Icengale</a></li>

</ul>
<script>
$(document).ready(function(){
   $("a.nav1").click(function () {
      // switch all tabs off
      $(".active").removeClass("active");
      // switch this tab on
      $(this).addClass("active");
   });
});
</script>

css

.active{background-image: url('../images/blue3.jpg');color:#fff;}