CODEWITHSUNDEEP
jqueryhyperlinkhighlight
Airikr
Airikr

Reputation: 6436

Remove the highlight from link upon click on another link

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.

Upvotes: 0

Views: 403

Answers (3)

Danilo Radenovic
Danilo Radenovic

Reputation: 1029

You can assign a class to each of the links, let's say ".changeableLink". Then, you can do something like this:

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

Upvotes: 0

phnkha
phnkha

Reputation: 7872

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>

Upvotes: 2

flec
flec

Reputation: 3019

You can select the link with the class and remove it like this:

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

Upvotes: 0

Related Questions