您可以检查每个链接，看它是否与当前位置匹配。这可以根据您的需要或多或少提前，但是类似于：

  var loc = window.location.pathname; 

 $（'。icyLink' ）.fi nd（'a'）。each（function（）{
 $（this）.toggleClass（'active'，$（this）.attr（'href'）== loc）; 
}）; 
 

然后在CSS中设置活动类的样式：

  .icyLink a.active {color：#fff} 
 

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.

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}