Question

I have a loop of links on a website I’m working on. Each link has a unique ID and when I click on one of these links, the link will be highlighted with bold text. If I’m clicking on another link, the highlighted link will be replaced with the one I have just clicked on.

Example code (please see the jsFiddle example):

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

How can I accomplish this?

Basic demo: http://jsfiddle.net/edgren/3VXVL/

Live demo to see exactly how I mean: the problem has been solved

Thanks in advance.

Answer 1

Try this 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>