根据当前页面动态更改链接的CSS [英] Dynamically change CSS of link based on current page

问题描述

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

 < ul class =icyLink> 
 
< li>< a class =nav1href =index.html> The World of Icengale< / a>< / li> 
< li>< a class =nav1href =history.htm> Icengale历史< / a>< / li> 
< li>< a class =nav1href =calendar.htm> Time& Icengale日历< / a>< / li> 
 
< / ul> 
  

每个链接的颜色为蓝色，每个< li> 有背景图片（background-image：url（'../ images / blue2.jpg'）。

我想做什么是根据当前页面动态更改单个链接的css。例如，如果有人在history.htm页面上，那么链接的颜色将变为白色，背景图像将更改为另一个（在这种情况下， blue3）。所有其他链接的css将保持不变。我将如何做到这一点？

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

小心并度过美好的一天....

c p，
john。

解决方案

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

  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}

这篇关于根据当前页面动态更改链接的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！