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

【问题标题】：Remove the highlight from link upon click on another link单击另一个链接时从链接中删除突出显示
【发布时间】：2012-12-15 01:25:09
【问题描述】：

我正在处理的网站上有一个链接循环。每个链接都有一个唯一的 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/

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

提前致谢。

【问题讨论】：

标签： jquery hyperlink highlight

【解决方案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>

【讨论】：

谢谢 :) 这就像一个魅力。我会尽可能接受你的回答。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：