javascript - jQuery adding and removing classes -

i'm trying create simple piece of code allows move red , blue ball around screen - click on 1 want move use arrow keys. part i'm struggling changing ball focused on, ie moved when press arrow keys.

the plan add .active class ball click on, while removing active class other.

i've got 2 simple divs, blue div set .active class:

<div id="blue" class="active"></div> <div id="red"></div> 

here's css:

div {     height: 100px;     width: 100px;     border-radius: 50%;     border: 5px solid gray;     margin: 20px;     position: relative;  }  #blue {     background-color: blue;   }      #red {     background-color: red;  } 

here's javascript:

$(document).ready(function() {     $("body").keydown(function(key) {         switch(parseint(key.which,10)) {             // left arrow key pressed             case 37:                 $('.active').animate({left: "-=10px"}, 1);                 break;             // arrow pressed             case 38:                 case 37:                 $('.active').animate({top: "-=10px"}, 1);                 break;             // right arrow pressed             case 39:                 case 37:                 $('.active').animate({left: "+=10px"}, 1);                 break;             // down array pressed             case 40:                 case 37:                 $('.active').animate({top: "+=10px"}, 1);                 break;         }     }); });  $(document).on("click", "#red", function () {     $("#red").addclass(".active");     $("#blue").removeclass(".active"); });  $(document).on("click", "#blue", function () {     $("#blue").addclass(".active");     $("#red").removeclass(".active"); }); 

i can move blue ball around clicking red has no effect, arrow keys continue move blue div.

here on jsfiddle - http://jsfiddle.net/7nf3l/

any suggestions better ways achieve same thing welcome.

the . used in front of class name in selector of query , rule mark class.

the class name not include .

so has be:

$("#red").addclass("active"); $("#blue").removeclass("active");