0

可能重复：
突出显示当前页面的导航菜单

我正在处理一个由多个 DIV 组成的菜单，每个 DIV 都有一个唯一的 CSS ID。:hover 选择器已在 CSS 中用于尝试在查看相应页面时为每个 div 赋予不同的样式，但它似乎没有生效。我的 CSS 和 HTML 可以在这个JSFiddle中看到。基本上，由于这些 div 用于创建菜单，我希望在查看超链接页面时将“活动”类添加到 div（当有人在我的“主页”页面上时，我想要应用于“主页”菜单 div 的活动样式）。

#pagebuttonhome {
  width: 130px;
  height: 30px;
  background-color: #ffe0e8;
  position: absolute;
  overflow: hidden;
  left: 30px;
  bottom: 0px;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 30px;
  color: #dc2d18;
}
#pagebuttonhome:hover {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
#pagebuttonhome.active {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
<div id="pagebuttonhome">HOME</div>

我很感激任何帮助！

4

1 回答 1

3

解决它的一种方法是在每个页面的正文中添加一个唯一的 id。例如，<body id="homelink">在主页、<body id="aboutlink">关于页面（如果有的话）等。然后，将#pagebuttonhome.active选择器替换为

#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout

它会选择并突出显示您所在页面的链接，而无需使用 javascript。

http://jsfiddle.net/MEnKR/11/

于 2012-09-08T01:53:23.297 回答