根据当前页面动态更改链接的CSS

我的网页顶部有以下链接：

 
The World of Icengale
 
History of Icengale
 
Time & Calendar of Icengale
  

每个链接的颜色为蓝色，每个

具有背景图像（background-image：url（’../ images / blue2.jpg’）。

我想要做的是根据当前页面动态更改单个链接的CSS。 例如，如果某人在https://stackoverflow.com/questions/9863396/dynamically-change-css-of-link-based-on-current-page/history.htm页面上，则链接的颜色将变为白色，背景图像将更改为另一个（在本例中为“blue3”）。所有其他链接的css将保留为同样的。我该怎么做？

一如既往，非常感谢任何和所有的帮助！

保重，祝大家愉快….

乔，约翰。

Answer 1

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

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

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

 .icyLink a.active{color:#fff} 

Answer 2

您正在寻找jQuery .css或.addClass函数。

Answer 3

在每个页面中设置一个唯一的body ID，然后在每个菜单项上设置一个id：

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

Answer 4

 
 
The World of Icengale
 
History of Icengale
 
Time & Calendar of Icengale
 
  

CSS

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