我正在使用这样的 CSS 代码
.top_nav ul li a{
color: #444; background: #111;
}
.top_nav ul li a:hover{
color: #fff; background: #555;
}
.top_nav ul li a:active{
color: #111; background: #fff;
}
但问题是当任何页面处于活动状态时,在导航菜单上链接的背景不会改变。该链接的背景与其他链接的背景相同。
我正在使用这样的 CSS 代码
.top_nav ul li a{
color: #444; background: #111;
}
.top_nav ul li a:hover{
color: #fff; background: #555;
}
.top_nav ul li a:active{
color: #111; background: #fff;
}
但问题是当任何页面处于活动状态时,在导航菜单上链接的背景不会改变。该链接的背景与其他链接的背景相同。
您可能正在寻找以不同颜色聚焦菜单中的活动链接。a:active
不打算用于此目的的头脑。
链接仅在单击时才占用a:active
状态,因此您只能在几秒钟内看到更改。您应该寻找一种不同的方式来完成它,例如为从服务器端脚本中选择的菜单项添加一个新的 css 类。
a:active 选择器指的是链接的活动状态,而不是您的活动页面。
http://www.w3schools.com/cssref/sel_active.asp
您必须为您当前正在查看的页面的菜单项设置一些“活动页面”类,并在您的 CSS 中引用该类。
如果您有静态 HTML 页面,您可以向导航项添加一个类来表示当前活动页面:
<li class="current">...</li>
然后将您的CSS更改为:
.top_nav ul li.current a {
color: #111; background: #fff;
}
只有当您单击它时才会应用活动。像这样做:
<li><a href="" class="active">Link</a></li>
然后样式化
top_nav ul li a.active {
color: #111;
background: #fff;
}