Question

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

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

问：我想点击它后，将当前选中的列排序为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();
});

这是代码的小提琴。 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

Answer 2

为合在一起的链接定义一个类，例如model。然后，当点击模型时：

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

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

2 个答案: