click the image and remove the active class

Is there a way where it is possible to remove the active class on red btn when I click on my img and then make blue btn class active?

HTML

<div id="nav">
<ul>
<li class="red btn"><a class="tildig" href="#din_app" data-transition="fade" >
  <p>TIL DIG</p>
  </a></li>
<li class="blue btn"><a class="kontakt" href="#kontakt" data-transition="fade" >
  <p>KONTAKT</p>
  </a></li>
</ul>
</div>

<div data-role="page" id="interesseret">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p class="brod">  
<a href="#kontakt" data-transition="fade"><img class="kontakt_link_480" src="image/link_img.png" width="480" height="100" alt="Tryk p&aring; kontakt og book et m&oslash;de" ></a></p>
</div>
<div data-role="footer"> </div>
</div>

Script

<script type="application/x-javascript">
$(function() {
      $('li.btn').click(function(){
          // Add "active" to the clicked element and
          // get all siblings and remove "active" from them
          $(this).addClass('active').siblings().removeClass('active');
      });

    });

CSS

.red.btn { float:left; margin: 0 0 0 5px ; width: 40%; height:30px; background-image:url(../image/rod_bnt.png);}
.red.btn.active { background-image:url(../image/red.jpg); height: 40px; background-position:center;}

.blue.btn {float:right; margin:0 5px 0 0; height:30px; width: 40%; background-image:url(../image/blaa_bnt.png); }
.blue.btn.active { background-image:url(../image/blue.jpg); height: 40px; background-position:center;}

I tried this but it does not work

 <script type="application/x-javascript">
 $(function() {
      $('a.img').click(function(){
          // Add "active" to the clicked element and
          // ge开发者_StackOverflow中文版t all siblings and remove "active" from them
          $(this).addClass('blue.btn.active').siblings().removeClass('red.btn.active');
      });

    });

 </script>

// thanks in advance Kasper.

You could do:

 $('a img').click(function(){
      // Add "active" to the blu li element and
      $('li.blue').addClass('active');
      //  remove "active" from the red element
      $('li.red').removeClass('active');
  });

If you just want to add active to blue and remove from red:

<script type="application/x-javascript">
$(function() {
  $('a.img').click(function(){
    $('.blue.btn').addClass('active');
    $('.red.btn').removeClass('active');
  });

});
</script>