点击时更改锚点颜色

Question

我希望当我点击这个链接时，它的颜色会改变为给定的颜色。

<li id="press"><a href="<?=base_url()?>index.php/page/press">Press</a></li>

- richa

---

你能解释一下你是想改变元素的文本颜色而不做其他操作，还是要跳转到href指定的URL并在该页面上有彩色链接？ - Crozin

是的，那正是我想要的...链接应该在我点击链接时是活动的... - richa

Answer 1

CSS声明:active可以实现你想要的效果。 http://www.w3schools.com/CSS/pr_pseudo_active.asp 示例。

a:active {
    color: #C00;
}

注意:

a:active 在 CSS 定义中必须在 a:hover 后面才能生效!

- Jonny Haynes

Answer 2

这是一个访问过的超链接的示例CSS。

a:link {color:#FF0000}    
a:visited{color:Red}

希望这能有所帮助。

- Asim Sajjad

---

-1 这不是 - Richa 希望在点击时颜色改变，而不是之后。 - Jonny Haynes

然后您可以使用a：active{color:Red}。希望这能帮到您。 - Asim Sajjad

Answer 3

所有链接？a:focus { color: orange; }

一些链接？给它们一个类，例如：<a class="foo" ...>：a.foo:focus { color: purple; }

一个链接？给它一个id，例如：<a id="bar" ...>：a#bar:focus { color: #BADA55; }

- Anonymous

---

a:focus 是不正确的。:focus 伪类会为具有键盘输入焦点的元素添加特殊样式。http://www.w3schools.com/CSS/pr_pseudo_focus.asp 而问题是 单击时更改锚的颜色。 - Jonny Haynes

@Haynes：：focus指的是光标焦点，它在链接被激活后应用（：active是短暂的）。也就是说，光标会移动到最后点击的位置。 - Anonymous

Answer 4

你可以使用PHP或JS在服务器端实现这一点。

使用PHP，你只需要在链接被点击后添加一个给定的类名即可。 一个非常简单的例子如下：

<a href="myURL" class="<?php if(ExpressionToDetermineIfLinkIsClicked) echo 'selected'; ?>">

以及 CSS：

.selected { color: #FF0000; }

如果您想使用JS完成此操作，并且正在使用任何JS框架，只需在框架网站上搜索“如何添加事件”和“如何添加类名”，然后将搜索结果中所得到的知识结合起来。

如果您碰巧正在使用prototype.js框架，则可以尝试以下方法：

function selectLink(link){
  link.addClassName('selected');

  var otherLinks = link.siblings();

  for(var i = 0; i < otherLinks.lenght; i++){
     otherLinks[i].removeClassName('selected');     
  }

}

document.observe('dom:loaded', function(){
    $('menu').observe('click', function(event){
       event.stop();
       var link = Event.element(event); 
       selectLink(link);
       });
    });

---
<div id="menu">
<a href="url1" id="link1" class="">
<a href="url2" id="link2" class="">
<a href="url3" id="link3" class="">
</div>

- Rossen Zahariev