我的网页顶部有以下链接：
<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>
每个链接的颜色都是蓝色，每个链接<li>都有一个背景图像（背景图像：url（'../images/blue2.jpg'）。
我想做的是根据当前页面动态更改单个链接的 css。例如，如果有人在 history.htm 页面上，那么链接的颜色将变为白色，背景图像将变为另一种（在本例中为“blue3”）。所有其他链接的 css 将保持为一样。我该怎么做？
与往常一样，非常感谢任何和所有帮助！
保重，度过美好的一天......
乔，约翰。
您可以检查每个链接，看看它是否与当前位置匹配。根据您的需要，这可以或多或少地先进，但类似于：
var loc = window.location.pathname;
$('.icyLink').find('a').each(function() {
$(this).toggleClass('active', $(this).attr('href') == loc);
});
然后在 CSS 中设置活动类的样式：
.icyLink a.active{color:#fff}
在每个页面中设置一个唯一的 body id，在每个菜单项上设置一个 id，然后：
#home-page #home-menu,
#history-page #history-menu { background: blue; } // Etc....
<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>
.active{background-image: url('../images/blue3.jpg');color:#fff;}