在加载时将类添加到 div [重复]答案

【问题标题】：Adding class to div on load [duplicate]在加载时将类添加到 div [重复]
【发布时间】：2012-09-01 21:13:25
【问题描述】：

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

我正在制作一个由多个 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;
}

&lt;div id="pagebuttonhome"&gt;HOME&lt;/div&gt;

感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

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

#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout

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

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

【讨论】：

迈克尔，效果很好-谢谢！