Question

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

 <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>都有背景图片（background-image：url（'../ images / blue2.jpg'）。

我想要做的是根据当前页面动态更改单个链接的css。例如，如果有人在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

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

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

4 个答案:

CSS