Question

可能重复：
highlight the navigation menu for the current page

我正在开发一个由多个DIV组成的菜单，每个DIV都有一个唯一的CSS ID。：hover选择器已在CSS中用于尝试在查看相应页面时为每个div提供不同的样式，但它似乎没有生效。我可以在JSFiddle中看到我的CSS和HTML。基本上，由于这些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>

我感谢任何帮助！

Answer 1

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

#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout

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

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

在加载时将类添加到div

1 个答案: