2010-01-22 18 views
6

i quieren que cuando yo haga clic en este enlace cambia de color al color dadoCambiar el color de un ancla cuando se hace clic

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

¿Podría explicar si desea cambiar el color del texto del elemento y no hacer nada más o tal vez ir a la URL especificada por 'href' y tener un enlace de color en esa página? – Crozin

+0

sí ... exactamente lo que quiero ... el enlace debe estar activo siempre que haga clic en el enlace de datos ... – richa

Respuesta

2

Todos los enlaces? a:focus { color: orange; }

Algunos enlaces? Dale una clase, por ejemplo <a class="foo" ...>: a.foo:focus { color: purple; }

¿Un enlace? Déle una identificación, por ejemplo <a id="bar" ...>: a#bar:focus { color: #BADA55; }

+0

'a: focus' es incorrecto. La pseudo-clase ': focus' agrega estilo especial a un elemento que tiene un foco de entrada de teclado. http://www.w3schools.com/CSS/pr_pseudo_focus.asp Y la pregunta es ** Cambiar el color de un ancla cuando se hace clic ** –

+0

@Haynes: ': focus' se refiere al enfoque de atención, que se aplica después de que el enlace se convierte active (': active' es transitorio). Es decir, el cursor se mueve a la posición en la que se hizo clic. – Anonymous

-2

Puede lograr eso en el lado del servidor con PHP o con JS.

Con PHP todo lo que necesita es agregar un nombre de clase dado al enlace una vez que se hace clic. un ejemplo muy simple sería:

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

y CSS:

.selected { color: #FF0000; } 

Si desea hacerlo con JS, y está utilizando cualquier marco JS sólo una búsqueda en el sitio de los marcos para " Cómo agregar un evento "&" Cómo agregar el nombre de clase "luego combine lo que obtiene a partir de los resultados de búsqueda.

Si es así, por casualidad, utilizando el framework prototype.js, continuación, puede probar lo siguiente:

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

Aquí está la muestra de Css para el hipervínculo visitado

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

la esperanza de que le ayudará.

+1

+1 Solución multiplataforma más simple y más compatible – slebetman

+1

-1 No es - Richa quiere que el color cambie cuando se hace clic, no después. –

+0

Luego puede usar a: active {color: Red} Espero que ayude –

Cuestiones relacionadas