CODEWITHSUNDEEP
javascriptjqueryhtmlcssnav
user2252219
user2252219

Reputation: 865

Background of div not changing

I have a navigation where the active boxes should be black and the non-active boxes are white however they all stay white. I'm trying to get it so that say you press the 4th box, all the boxes leading to the 4th would be coloured black.

jsBin

.nav__link--active .nav__link-bullet{
    -webkit-animation: bounce .40s linear;
    animation: bounce .40s linear;
    background-color: black;
}

It seems to be overridden by

.nav__link-bullet{
    display: block;
    height: 20px;
    width: 20px;
    background-color: white;
}

but I can't seem to get it to work right.

Upvotes: 1

Views: 75

Answers (1)

Khalid
Khalid

Reputation: 4808

In your javascript file, you have to define the click event of the nav elements to remove all active classes and make the div parent active

   $('.nav__link a').click(function(){
       $('.nav__link').removeClass('nav__link--active')
       $(this).parent().addClass('nav__link--active');

   })

Here is the example on jsBin

Upvotes: 1

Related Questions