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>
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!
Here is the sample Css for the visited hyperlink
a:link {color:#FF0000}
a:visited{color:Red}
Hope that will help.
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; }
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>
精彩评论