javascript - 使用 Jquery 单击时使链接加粗

Question

我有两个用于排序的链接。一个是品牌，一个是型号(两者都是升序和降序)。

现在我有它，所以当您加载页面时，您只能看到模型降序和制作降序。如果您要单击假设模型降序，它会隐藏该链接并显示模型升序的链接。

问:我想让当前选择的排序列在您单击后变为粗体。并在选择另一列后取消加粗并重置为原始链接。

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

这是代码的 fiddle 。 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