jquery - 单击另一个链接时从链接中删除突出显示

Question

我正在处理的网站上有一个链接循环。每个链接都有一个唯一的 ID，当我单击其中一个链接时，该链接将以粗体文本突出显示。如果我单击另一个链接，突出显示的链接将替换为我刚刚单击的链接。

示例代码（请参阅 jsFiddle 示例）：

$('body').on('click', '#link-1', function() {
    if($(this).hasClass('normal-text')) {
        $(this).removeClass('normal-text');
        $(this).addClass('bold-text');

    } else if($(this).hasClass('bold-text')) {
        $(this).removeClass('bold-text');
        $(this).addClass('normal-text');
    }
});

我怎样才能做到这一点？

基本演示：http: //jsfiddle.net/edgren/3VXVL/

现场演示，确切了解我的意思：问题已解决

提前致谢。

Answer 1

试试这个http://jsfiddle.net/3VXVL/4/

javascript:

$(document).ready(function() {
    $('body').on('click', '.link', function() {
        $('.bold-text').removeClass('bold-text');
        $(this).addClass('bold-text');
    });
});

html:

<a href="javascript:void(0)" id="link-1" class="link normal-text">Link 1</a> - 
<a href="javascript:void(0)" id="link-2" class="link normal-text">Link 2</a> - 
<a href="javascript:void(0)" id="link-3" class="link normal-text">Link 3</a>

Answer 2

您可以选择该类的链接并将其删除，如下所示：

$('.bold-text').removeClass('bold-text').addClass('normal-text');

Answer 3

您可以为每个链接分配一个类，例如“.changeableLink”。然后，您可以执行以下操作：

var allLinks = $('.changeableLink');
$('body').on('click', '.changeableLink',function() {
      allLinks.removeClass('bold-text');
      $(this).addClass('bold-text');
});