i have 3 tabs and i would like to add custom images on the tabs that change when the tabs are active or not.

like this

my layout is like this:

2.         
3.  <div class="tabs">
4.         <ul class="tabNavigation">
5. <li><a class="ep-messages" href="#first">Firstddddd</a></li>
6. <li><a class="ep-friends" href="#second">Second</a></li>
7. <li><a class="ep-alerts" href="#third">Third</a></li>
8.         </ul>
9.         <div id="first">
10.             <h2>First</h2>
11.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labor</p>
12.         </div>
13.         <div id="second">
14. 
    
15.             <h2>Second</h2>
16.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
17.         </div>
18.         <div id="third">
19.             <h2>Third</h2>
20.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te</p>
21.         </div>
22.     </div>

css:

2. .ep-messages_click {
3. width:20px;
4. } 
6. .ep-messages {
7. width:50px;
8. } 
9. .ep-friends_click {
10. width:20px;
11. }
12. .ep-friends{
13. width:50px;
14. }
15. .....

js:

2. $( 'div.tabs ul.tabNavigation a.ep-messages ' ).click(function(){
3. $('div.tabs ul.tabNavigation a.ep-messages ').removeClass('ep-messages').addClass('ep-messages_click');
4. });
5. 
   
6. $( 'div.tabs ul.tabNavigation .ep-friends ' ).click(function(){
7. $('div.tabs ul.tabNavigation .ep-friends ').removeClass('ep-messages_click').addClass('ep-friends_click');
8. $( 'a.ep-messages ' ).removeClass('ep-messages_click').addClass('ep-messages');
9. });
10. ....

but this doesn't work