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}

Answer 2

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 3

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

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;}