javascript - toggling image classes for inactive/active states -

i'm still coming against resistance here js- have row of thumbnails. first starts active class,the others have inactive classes. on click, want thumb clicked switch active , previous go inactive. want hover effect inactive classes. right now, can add active class, cant figure out how toggle prev active class

jquery(document).ready(function($) { $(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){ if ( $(this).find(".toplevel").hasclass("inactivethumb") ) { $('img', this).toggleclass("activethumb inactivethumb");  } }),  $('.groomsmen_thumbs, .bridesmaid_thumbs') .on("mouseenter", function() { $(this).find(".inactivethumb.toplevel").animate({"opacity": "1"}, "fast"); }) .on("mouseleave", function() { $(this).find(".inactivethumb.toplevel").animate({"opacity": "0"}, "fast");  }) }); 

links this

<li><a href="#" class="groomsmen_thumbs"><img src="images/groom_thumb1_0.jpg"/><img class="toplevel activethumb" src="images/groom_thumb1_1.jpg"/></a></li> 

try use jquery's active , prev:

js :

$(document).ready(function(){ var active = $(".active"); var next = active.next('img'); active.click(function(){     active.removeattr('class');     next.addclass('active');     }); }) 

html :

<ul> <li> <img src="1.jpg" class="active"/> <img src="2.jpg" class=""/> </li> </ul>