Skip to content Skip to sidebar Skip to footer

Change Color Of An Anchor When Clicked

i want that when i click this link its color changes to the given color
  • Press
  • Solution 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!


    Solution 2:

    Here is the sample Css for the visited hyperlink

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

    Hope that will help.


    Solution 3:

    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; }


    Solution 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>
    

    Post a Comment for "Change Color Of An Anchor When Clicked"