这是我的HTML代码
<div id="menus">
<ul>
<li><a href="HomePage.html">Home</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Project Manage</a></li>
<li><a href="#">Transaction</a></li>
<li style="border-right:none;"><a href="#">Logout</a></li>
</ul>
</div>
这是我的CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
现在我想在用户点击li时更改css(比如选择显示当前)。我只能用css吗?如果是,那怎么??
提前致谢..
答案 0 :(得分:10)
您只能使用focus
和tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
采用“主动”菜单项解决方案的好方法是
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
来源:http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
答案 1 :(得分:2)
不,你不能只用css
来做这件事。我不太确定该怎么说......
如果您希望页面特定处于活动状态,请在后端放置一个不同的类,例如:
<a href="#" class="active"></a>