Question

The HTML:

<a href='#' id='myLink1' class='areaLink activeArea' onClick="myFunction('1')">Click Me 1</a>
<a href='#' id='myLink2' class='areaLink activeArea' onClick="myFunction('2')">Click Me 2</a>

CSS:

.activeArea { font-weight: bold; }

I have the following code runny on document ready:

$(document).ready(function() {

    $('a.areaLink').click(function() {
        $('a.areaLink').removeClass('activeArea');
    });

});

And this code inside the function that executes on the onClick event:

function myFunction(num) {

    $('#myLink'+num).addClass('activeArea'); // !important

}

OK, so when the page initially loads, visually the links should look like this:

Click Me 1
Click Me 2

When the user clicks on either link, that link should become bold like so:

Click Me 1
Click Me 2

So how can I make this line within the function:

$('#myLink'+num).addClass('activeArea');

OVERIDE the code running on document ready?

Answer 1

Why don’t you just remove the .removeClass() from the jQuery click event?

function myFunction(num) {
    $('a.areaLink').removeClass('activeArea');
    $('#myLink' + num).addClass('activeArea'); // !important
}