jQuery program not working

Question

I am having a problem using jQuery, merely due to inexperience using it. My program is meant to give the CSS class current to the links in my navbar if they are clicked, and remove the class from the previous owner of it.

Keep in mind I am very inexperienced in javascript, only picking it up in a few minutes for the sake of a school assignment.The script is simply not doing anything.

My Code:

$(document).ready(function() {
    $('a').click( function(i){
        var $current = $('a.current');
        $(this).addClass('current');
        $current.removeClass('current');
    });
});

Edit 1: Strange bug, current class is applied to the whole document if I do not click a link, but instead click the document.

Are you wanting the class to be applied on the page after you navigate to it? Or do the links not actually point to anywhere? — Sam Willis
– Sam Willis, Commented Aug 11, 2016 at 8:59
The topic has already been answered, but, for the sake of argument, the links do point somewhere, they're part of my navbar. I want the class to be applied when the links are clicked. — James Balajan
– James Balajan, Commented Aug 11, 2016 at 9:01
Well if you want the page that is navigated to, to have the current class, then you need a way of passing that through to the new page, as all the answers so far will only work for the current page — Sam Willis
– Sam Willis, Commented Aug 11, 2016 at 9:03
The links are links that take you to certain elements with ids on the same page, they aren't inter-page, because that could just be done by setting that page's nav bar link to the current class — James Balajan
– James Balajan, Commented Aug 11, 2016 at 9:19

eisbehr · Accepted Answer · 2016-08-11 08:49:01Z

2

You should first remove the class, and then add it. Otherwise you will not have a class added if you click an anchor twice.

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

edited Aug 11, 2016 at 8:49

answered Aug 11, 2016 at 8:46

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Surender Lohia · Accepted Answer · 2016-08-11 08:47:38Z

0

Try this:

$current.removeClass('current');
$(this).addClass('current');

You need to first remove the active class, then add the current class for the current element.

answered Aug 11, 2016 at 8:47

Surender Lohia

3793 silver badges12 bronze badges

Comments

Sam Willis · Accepted Answer · 2016-08-11 09:08:35Z

0

You need to narrow down your code to only affect the links in the nav bar, as currently, you are targetting all <a> tags.

var navLink = $('.nav a');

navLink.on('click', function(e){
    navLink.removeClass('current');
    $(this).addClass('current');
});

In this code, the variable gets all instances of the nav links, and if one of them is clicked, will remove the current class from all of the links before adding it onto the one that was clicked.

This jsfiddle will show you it in action: https://jsfiddle.net/td48vcqy/

answered Aug 11, 2016 at 9:08

Sam Willis

4,2718 gold badges45 silver badges65 bronze badges

2 Comments

James Balajan Over a year ago

Thank you very much, this was extremely helpful, only one problem with your code. I think it was meant to be $('a.nav'); not $('.nav a');

Sam Willis Over a year ago

I just used that as an example of how to make your code specific to your nav. Ideally you would have a class either around your links that you can use or on the links themselves which would allow you to select the correct items.

Collectives™ on Stack Overflow

jQuery program not working

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related