CODEWITHSUNDEEP
jqueryhtmlcss
Andy Hargreaves
Andy Hargreaves

Reputation: 3

jQuery change class to list a links onclick

On my menu I have jQuery changing the colour of the button once it is clicked - so this highlights the active menu. But I want to also show where the user has already clicked, whilst the active menu stays blue.

How do I do this?

I can show the active menu in blue, but can't work out the code to show visited (a.degrees-visited) properly.

DEMO FIDDLE: Fiddle

<ul id="nav">
<li><a href="#" class="nav-left degrees hide-show default-show" rel="menu1">Menu 1</a></li>
<li><a href="#" class="nav-left degrees hide-show" rel="menu2">Menu 2</a></li>   
<li><a href="#" class="nav-left degrees hide-show" rel="menu3">Menu 3</a></li>  
<li><a href="#" class="nav-left degrees hide-show" rel="menu4">Menu 4</a></li>


$('#nav li a.degrees').on('click', function(){
 $('li a.degrees-current').removeClass('degrees-current');
 $(this).addClass('degrees-current');
});

Upvotes: 0

Views: 235

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Use toggleClass()

$('#nav li a.degrees').on('click', function(){
     $('li a.degrees-current').removeClass('degrees-current').addClass('degrees-visited');
     $(this).addClass('degrees-current');
});

Demo: Fiddle

Upvotes: 1

Nishanth Matha
Nishanth Matha

Reputation: 6081

Just add other class:

$('#nav li a.degrees').on('click', function(){
 $('li a.degrees-current').removeClass('degrees-current');
 $(this).addClass('clicked');
 $(this).addClass('degrees-current');
});

And style that class in your CSS:

.clicked{
background:green;
}

Upvotes: 0

Related Questions