在點擊其他鏈接時刪除鏈接中的高亮顯示

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