Jquery - match link color to image displayed

Question

Ive got a slider with 3 circles at the bottom, when picture is displayed, the correct circle background must be turned to green, correlating to the correct image. Ive got it working, but when user clicks on a new circle, to change image, the old background color remains in place and does not disappear, as you can see from the picture example.

In the above example, the page loaded with the middel image highlighted, when user clicked the right circle the image changed, and highlighted the right circle (as it should) BUT the middle buttons highlight color remained in place...What am I missing here? Code follows:

$(document).ready(function(){
    $("a").click(function(){
      $("iLink").removeClass()
        $(this).addClass("over")  
    }) ; 
});

.over {
    background:#008000;
}

<a href="#" id="l1" class="iLink1"  onclick="imgSliderL1()"><img id="i1" src="images/dot.png"/></a>
     <a href="#" id="l2" class="iLink2" onclick="imgSliderL2()"><img id="i2" src="images/dot.png" /></a>
     <a href="#" id="l3" class="iLink3" onclick="imgSliderL3()"><img id="i3" src="images/dot.png" /></a>

Answer 1

what is iLink ?

$("iLink").removeClass()

change to

 $('a').removeClass()

why need different class?

Answer 2

选择该ID并关联条件，然后使用jquery或CSS函数的CSS属性选择一个ID。

Answer 3

Change

$("iLink").removeClass()

to

$("a[class^='iLink']").removeClass()

because the a tags contains different classes but they all start with same name iLink