求助：a:active 不生效！！

[周古之]

我想用以下css实现：选择一个菜单后，停留在a:active的样式上。

现在的问题是：当鼠标按下去的时候样式是有的，一松开或移走，就回到a:link的样式了。



/*CSS样式*/

#menu ul li {background: #eef; border-bottom: 1px solid #CCC; float:left;}
#menu ul li a { display:block; height: 38px; width:168px; line-height: 38px; float:left;}
#menu ul li a:link {background: #eef; color:#666;}
#menu ul li a:visited {background: #eef; color:#666;}
#menu ul li a:hover { background:#3ab3ec; font-size:14px; color:#fff; font-weight:bold;}
#menu ul li a:active { background:#3ab3ec; font-size:14px; color:#fff; font-weight:bold;}

/*html代码*/

<div id="menu">
<ul>
<li><a href="./index_game.htm">装机必备</a></li>
<li><a href="./content.htm">网络游戏</a></li>
<li><a href="#">街机游戏</a></li>
<li><a href="#">冒险游戏</a></li>
<li><a href="#">策略游戏</a></li>
<li><a href="#">动作游戏</a></li>
<li><a href="#">智力游戏</a></li>
<li><a href="#">赛车游戏</a></li>
<li><a href="#">棋牌游戏</a></li>
<li><a href="#">教育游戏</a></li>
</ul>
</div>

[conan8126]

因为#menu ul li a:visited {background: #eef; color:#666;}，鼠标移开之后真正起作用的是 a:visited

[碧海情天-赵亮]

没错，楼主好好看看几个伪类表示的作用。

[周古之]

引用 1 楼 conan8126 的回复:

因为#menu ul li a:visited {background: #eef; color:#666;}，鼠标移开之后真正起作用的是 a:visited

因为这个是菜单导航，没次点击，内容都会变的，就是希望该导航栏能根据选择的菜单固定为a:active时的样式，并不希望它被访问后一直是这个样式。 这个能用伪类实现吗？

[wbb123yu]

。。。active是 点击时 link是点击后 LZ你先去看看伪类是啥意思吧

[conan8126]

引用 3 楼 Gooneyear 的回复:

引用 1 楼 conan8126 的回复: 因为#menu ul li a:visited {background: #eef; color:#666;}，鼠标移开之后真正起作用的是 a:visited 因为这个是菜单导航，没次点击，内容都会变的，就是希望该导航栏能根据选择的菜单固定为a:active时的样式，并不希望它被访问后一直是这个样式。 这个能用伪类实现吗？

其实这种问题，给没有选中的导航菜单设定一个样式，给没有选中的导航菜单设定一个样式，然后用javascript来实现，代码如下

function selectTab(idx) {
    for (var i = 1; i <= 7; i++) {
       if (idx == i) {
            document.getElementById("TD" + i).className = "tabSelect";
       } else {
            document.getElementById("TD" + i).className = "tabUnSelect";
       }
    }
}

[周古之]

多谢 @conan8126 ！！