使用Jquery单击时使链接变为粗体

Question

我有两个用于排序的链接.一个由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/

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

Answer 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