2011-05-02 28 views
5

Si tengo 5 enlaces.Al principio si hago clic en un enlace, tengo que cambiar a otro color y luego si hago clic en otro enlace el color del vínculo anterior debe ser el predeterminado y este color del enlace debe cambiarcambiar el color del enlace

CÓDIGO:

$("table#menu tr > td a[href^='#']").click(function() { 
    $(this).toggleClass('class1');/
}); 

a.class1 { color:#000000; } 

<table id="menu"> 
<tr> 
    <td><a href="#" id="link1">qwerty</a></td> 
</tr> <tr> 
    <td><a href="#" id="link1">zyz</a></td> 
</tr> 
</table> 
+0

que tendrá que hacerlo manualmente cableando eventos de clic. Si puede mostrar su marcado y sus requisitos, podremos ayudarlo – neebz

+0

@nEEbz: $ ("table # menú tr> td a [href^= '#']"). haga clic en (función() { $ (this) .toggleClass ('class1'); / }); a.class1 { color: # 000000; }

qwerty
zyz

+0

Después de la llamada a toggleClass, hay una barra inclinada '/'. ¿Es un error tipográfico? – Zirak

Respuesta

2

Esto debe responder a su pregunta:

http://jsfiddle.net/TL9rh/

html

<div id="links"> 
    <a href="#">link1</a> 
    <a href="#">link2</a> 
    <a href="#">link3</a> 
    <a href="#">link4</a> 
    <a href="#">link5</a> 
</div> 

Javascript

$(document).ready(function(){ 
    $('#links a').click(function(){ 
     $(this).addClass('selected'); 
     $(this).siblings().removeClass('selected'); 
    }); 
}) 

css

a { 
    color: darkgreen; 
} 


.selected { 
    color: red; 
} 
+0

si tengo una tabla y cada td tiene un enlace. ¿Cómo lo haría? –

+0

de esta manera: http://jsfiddle.net/ZXazE/1/ – netbrain

+0

puede cambiar sus estilos con la adición de algún id. Bcoz global está creando problemas aquí. –

6

clases.

css:

a { 
    color: green; 
} 
a.special { 
    color: orange; 
} 

javascript:

$('a').click(function(evt) { 
    evt.preventDefault(); //don't follow link 
    //remove the special class from all links which already have it 
    $('a.special').removeClass('special'); 
    //add the special classs to the clicked link 
    $(this).addClass('special'); 
} 

Por supuesto, habrá que cambiar los selectores para adaptarse a su html.

ejemplo vivo: http://jsfiddle.net/KHjDr/

+1

+1 Para usar clases en lugar de cambiar directamente el color. –

+0

sí, enfoque agradable .... +1 – Nirmal

+0

funciona como encanto – Pavlos1316

0

Si la página que contiene los enlaces está no de refresco, puede hacerlo sólo con CSS.

HTML

<a href="#">MyLink1</a> 
<a href="#">MyLink2</a> 
<a href="#">MyLink3</a> 

CSS

a:link{color: blue;} 
a:active{color: red;} 
0

la versión correcta será para jQuery:

$(document).ready(function(){ 
$('.win a').click(function(){ 
    $('.win a:first-child').removeClass('focused'); 
    $(this).addClass('focused'); 

}); 

})

y el html:

<li class="widget-title win"><a class="focused" href="#window1">Recent News</a></li> 
<li class="widget-title win"><a href="#window2">Most Favorites</a></li> 
<li class="widget-title win"><a href="#window3">Top News</a></li> 
Cuestiones relacionadas