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

I have two links I use for sorting. One by Make and one by Model(ascending and descending for both).

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

Right now I have it so when you load up the page you can only see Model Descending and Make descending. If you are to click on lets say Model Descending it hides that link and shows the link for Model Ascending.

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

Q: I want to make the currently selected column for sorting made Bold once you click it. And unbolded and reset to the original link once another column is selected.

问:我想点击它后,将当前选中的列排序为Bold。并且一旦选择了另一列,则取消绑定并重置为原始链接。

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

Here is the fiddle with the code. http://jsfiddle.net/JKFKC/1/

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

Any help is appreciated. Thanks.

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

2 个解决方案

#1

use this

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

make you code smaller

让你的代码更小

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

#2

Define a class for the links that go together, such as model. Then, when a model is clicked:

为一起组合的链接定义一个类,例如模型。然后,单击模型时:

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

#1