javascript - Multiple .active classes for navigation with jQuery -

i have simple page uses jquery hide , show content. have 3 links, , 3 divs related 3 links. when click 1 of links div displayed. jquery script adds .active class link can show link active.

my problem need have 3 different .active classes, 1 each link, can have different background image when it's active. here jquery code runs all:

<script type='text/javascript'>//<![cdata[    $(window).load(function(){      $('.link').click(function(e) {       e.preventdefault();        // remove active classes:       $('.active').removeclass('active');       $(this).addclass('active');        // hide content:       $('.content').fadeout();       $('.logo').fadeout();         // show requested content:       var content = $(this).attr('rel');       $('#' + content).fadein();     });    });//]]>  </script> 

i couldn't figure out how create jsfiddle, have link dev page here: http://agoberg.tv/kiosk/index.html

i figured out. added 3 classes in css, 1 each link. tweaked jquery this:

<script type='text/javascript'>//<![cdata[ $(window).load(function(){ // catch clicks on link class 'link' $('.link').click(function(e) { // stop link being followed: e.preventdefault(); // div shown: var content = $(this).attr('rel'); // remove active classes: $('.activediv1').removeclass('activediv1'); $('.activediv2').removeclass('activediv2'); $('.activediv3').removeclass('activediv3'); // add 'active' class link: $(this).addclass('active' + content);  // hide content: $('.content').fadeout(); $('.logo').fadeout();   // show requested content: $('#' + content).fadein();  }); });//]]>  </script>