点击大纲？

Question

我有以下代码：

<a href="main.html" class="admin"><div class="buttonlabel">Admin</div></a>

和CSS

a.admin  
{
display:block;
text-decoration:none;
float:left;
background: transparent url(./images/adminnormal.png?rand=628) no-repeat top center;
height:75px;
width:75px;
margin:5px;
outline: #00FF00 dotted thick;
}

上面的代码有这个输出：

我希望仅在用户点击此链接时才会概述此链接（onclick）。任何想法如何做到这一点？

Answer 1

<强> HTML：

<a href="main.html" class="admin"><div class="buttonlabel">Admin</div></a>

<强> CSS：

a.admin  
{
display:block;
text-decoration:none;
float:left;
background: transparent url(./images/adminnormal.png?rand=628) no-repeat top center;
height:75px;
width:75px;
margin:5px;

}
a.admin.act{outline: #00FF00 dotted thick;}

<强> jQuery的：

$('.admin').click(function(){
$(this).addClass('act');
})

Answer 2

简单的伙伴：

$('a.admin').click(function(){
  $(this).attr('style','outline: #00FF00 dotted thick;');
});

Answer 3

使用:active伪类：

a.admin:active {
  outline: #00FF00 dotted thick;
}

根本不需要任何javascript。

编辑：指出:active被定义为仅在按住鼠标时才起作用。可以使用:focus伪类 - 当链接被聚焦时它将处于活动状态，点击之后它将被激活，直到选择了其他内容。