Change color of an anchor when clicked

廉价感情. 提交于 2021-02-05 04:46:59

问题


i want that when i click this link its color changes to the given color

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

回答1:


The CSS declaration :active will accomplish what you're after. http://www.w3schools.com/CSS/pr_pseudo_active.asp

Example.

a:active {
    color: #C00;
}

NB.

a:active MUST come after a:hover in the CSS definition in order to be effective!




回答2:


All links? a:focus { color: orange; }

Some links? Give them a class, eg <a class="foo" ...>: a.foo:focus { color: purple; }

One link? Give it an id, eg <a id="bar" ...>: a#bar:focus { color: #BADA55; }




回答3:


Here is the sample Css for the visited hyperlink

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

Hope that will help.




回答4:


You can accomplish that at server-side with PHP or with JS.

With PHP all you need is to added a given classname to the link once clicked. a very simple example would be:

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

and CSS:

.selected { color: #FF0000; }

If you would like to do it with JS , and you are using any JS Framework just search the frameworks' site for "How to add an event" & "How to add classname" then combine what you get to know from the search results.

If you are, by coincidence, using prototype.js framework, then you can try the following:

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>


来源:https://stackoverflow.com/questions/2116073/change-color-of-an-anchor-when-clicked

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!