How to add and remove a current state to a link when another is clicked using jQuery

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 */ });

Answer 2

$(document).ready(function() {
  $('.boldhim').click(function() {
    $('.boldthislink').css('font-weight', 'bold');
  });
  $('.unboldhim').click(function() {
    $('.boldthislink').css('font-weight', 'normal');
  });
});

Or in your case you can do it like that

$(document).ready(function() {
  $('.next').click(function() {
    $(a.current).removeClass('current').next().addClass('current');
  });
  $('.prev').click(function() {
    $(a.current).removeClass('current').prev().addClass('current');
  });
});

Answer 3

These basic things are pretty much covered in every jquery tutorial. Try reading this one: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Pay attention to selectors and events.

Answer 4

Make them all the same class, using linkclass in this example.

$('.linkclass').click(function(){
  $('.current').removeClass('current');
  $(this).addClass('current');
});

This has the advantage of being scalable - you can have as many or as few links as you like and only one will be 'current' at any given time.