首先,我有一个包含我的菜单的无序列表。
<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>
我想要做的是每当用户在页面上时,悬停状态变为事件状态。换句话说,根据用户所在的页面,将菜单项的背景颜色更改为较暗的颜色。
最佳答案
如果您对 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 库。
关于html - 当前菜单页面的 CSS 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24946143/