Heim > Web-Frontend > HTML-Tutorial > 求助:a:active 不生效!!_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:17:17
Original
2252 Leute haben es durchsucht

我想用以下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";       }    }}
Nach dem Login kopieren

多谢 @conan8126 !!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage