2012-06-13 32 views
6

Tengo dos enlaces que utilizo para ordenar. Uno por Marca y uno por Modelo (ascendente y descendente para ambos).Hacer un enlace Negrita al hacer clic con Jquery

Ahora mismo lo tengo así que cuando cargas la página solo puedes ver el Modelo descendente y el Descenso descendente. Si va a hacer clic en vamos a decir Modelo descendente, oculta ese enlace y muestra el enlace para el Modelo ascendente.

P: Quiero hacer que la columna actualmente seleccionada para la ordenación sea Negrita una vez que haga clic en ella. Y se desmarca y restablece al enlace original una vez que se selecciona otra columna.

HTML:

<a href='#' id='modelD'>Model D</a> 
<a href='#' id='modelA'>Model A</a> 
<a href='#' id='makeD' >Make D</a> 
<a href='#' id='makeA' >Make A</a>​ 

JQUERY:

$('#modelA').hide(); 
$('#makeA').hide(); 

$('#modelD').click(function(){ 
    $('#modelD').hide(); 
    $('#modelA').show(); 
}); 

$('#modelA').click(function(){ 
    $('#modelA').hide(); 
    $('#modelD').show(); 
}); 

$('#makeD').click(function(){ 
    $('#makeD').hide(); 
    $('#makeA').show(); 

}); 

$('#makeA').click(function(){ 
    $('#makeA').hide(); 
    $('#makeD').show(); 
}); 

Aquí es el violín con el código. http://jsfiddle.net/JKFKC/1/

Cualquier ayuda es apreciada. Gracias.

+5

No veo la pregunta aquí. – asawyer

Respuesta

8

uso de este

.css('font-weight', 'bold') 

hacer un mejor código más pequeño

$('#modelD, #modelA').click(function() { 
    $('#modelD, #modelA').toggle().css('font-weight', 'bold'); 
    $('[id^=make]').css('font-weight', 'normal'); 
}); 


$('#makeA, #makeD').click(function() { 
    $('#makeA, #makeD').toggle().css('font-weight', 'bold'); 
    $('[id^=model]').css('font-weight', 'normal'); 
}); 

DEMO

+0

Exactamente lo que estaba buscando. Gracias. – Marc

1

Definir una clase para los enlaces que van juntas, como model. Luego, cuando se hace clic en un modelo:

$(".model").css({"font-weight":"normal"}); // un-bold all the model links 
$(this).css({"font-weight":"bold"}); // bold the clicked link. 
Cuestiones relacionadas