Question

Hi there, it my first time here – please go easy on me!

I am struggling to find an answer to my question which is:

How to add and remove a CSS .current class to a link when another link is clicked. For example, using this code:

<a class="boldthislink">Bold me?</a>
<a class="boldhim">bold him</a>
<a class="unboldhim">unbold him</a>

I want to make the first link bold by clicking the 2nd link and then unbold by clicking the third link. Is this possible?

For another example,

My dev site is here: Karls dev site

On my dev site I want to make the <a> link ‘background’ underline/bold when you click ‘Next‘ underneath the first paragraph of text, which will also send you to the next spread as it currently does. Then on the next page, when you click ‘Previous or next‘ the link ‘background’ isn’t underlined anymore, only the nav link of the spread that you are on, and so on.

Any help would be very appreciated!! Im a beginner with Jquery, and most of my code is open source taken from various places so may look scrappy to you! 🙂

Many thanks, Karl.

Answer 1

Bare minimum code (not optimized, polished, loved, given an education, or otherwise treated kindly):

$('a.boldhim').click(function ()
{
    $('a.boldthislink').addClass('current');
});

$('a.unboldhim').click(function ()
{
    $('a.boldthislink').removeClass('current');
});

Make sure you’re calling it inside of a document ready handler, e.g. one of these:

$(document).ready(function () { /* your code here */ });

or this (which shorthand for the above):

$(function () { /* your code here */ });