html - 当前菜单页面的 CSS 状态？

Question

首先，我有一个包含我的菜单的无序列表。

<ul id='css3menu1' class='topmenu'>
    <li class='topmenu'>
        <a href='home.html'>Home</a>
    </li>
    <li class='topmenu'>
        <a href='forum.php'>Forum</a>
    </li>
    <li class='topmenu'>
        <a href='policy.html'>Policy</a>
    </li>
    <li class='topmenu'>
        <a href='logout.php'>Log out</a>
    </li>
</ul>

我想要做的是每当用户在页面上时，悬停状态变为事件状态。换句话说，根据用户所在的页面，将菜单项的背景颜色更改为较暗的颜色。

Answer 1

如果您对 jQuery 解决方案感兴趣

<script>
  $(function() {
    $('#css3menu1 li a[href="'+location.href.split('/').pop()+'"]').addClass('active');
  });
</script>

---

.active {
  background: #f1f1f1;
  border-top: 3px solid #cecece;
}

*注意:将脚本放在</body>之前标记，当然在文档的 header 部分包含 jQuery 库。