Home  >  Article  >  Web Front-end  >  求助:a:active 不生效!!_html/css_WEB-ITnose

求助:a:active 不生效!!_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:172179browse

我想用以下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代码*/

 


   
 


回复讨论(解决方案)

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

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

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

这个能用伪类实现吗?

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

引用 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 !!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn