6

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

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

问：我想让当前选中的用于排序的列在单击后变为粗体。一旦选择了另一列，就会取消粗体并重置为原始链接。

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>​

查询：

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

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

4

2 回答 2

8

用这个

.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');
});

演示

于 2012-06-13T16:57:22.307 回答
1

为连接在一起的链接定义一个类，例如model. 然后，当单击模型时：

$(".model").css({"font-weight":"normal"}); // un-bold all the model links
$(this).css({"font-weight":"bold"}); // bold the clicked link.
于 2012-06-13T16:58:48.817 回答