нажмите на изображение и удалите активный класс

Question

Есть ли способ, где можно удалить активный класс на красном btn, когда я нажимаю на img, а затем активизирую синий класс btn?

<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;}

Я пробовал, но это не работает

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

    });

 </script>

// заранее спасибо Каспер.1017 *

Answer 1

Вы можете сделать:

 $('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');
  });

Answer 2

Если вы просто хотите добавить активный к синему и удалить из красного:

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

});
</script>