javascript – 使用Jquery单击时使链接变粗

我有两个用于排序的链接.一个由Make和一个由Model(升序和降序两者).

现在我拥有它,所以当你加载页面时,你只能看到Model Descending和Make descending.如果你要点击让我们说Model Descending它会隐藏该链接并显示Model Ascending的链接.

问：我想点击它后,将当前选中的列进行排序.并且一旦选择了另一列,就解压缩并重置为原始链接.

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

这是代码的小提琴.
http://jsfiddle.net/JKFKC/1/

任何帮助表示赞赏.谢谢.

解决方法

用这个

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

让你的代码更小

$('#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