Javascript 如何在幻灯片放映中的选定图像中添加类？

当我单击拇指图像时，我想选择该拇指图像，但在这里，当我单击其他拇指图像时，上一个拇指图像保持选中状态

CSS代码：

.imgStyle:hover {
      border-color: black;
}
.imgStyle {
    height: 100px;
    width: 100px;
    border: 2px solid grey;
}
.active {
    border-color: red;
}

//js代码

$(document).ready(function () {
    $('#divContainer img').on('click', function () {

        $(this).addClass('active');

        var imgURl = $(this).attr('src');

        $('#mainImage').fadeOut(1000, function () {
            $(this).attr('src', imgURl);
        }).fadeIn(1000);

    });
}); 

HTML：

<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey">

<br/>
<div id="divContainer">
    <img class="imgStyle" src="images/Chrysanthemum.jpg" />
    <img class="imgStyle" src="images/Desert.jpg" />
    <img class="imgStyle" src="images/Hydrangeas.jpg" />
    <img class="imgStyle" src="images/Jellyfish.jpg" />
    <img class="imgStyle" src="images/Koala.jpg" /> 
</div>

从单击图像的

同级
中删除
active
类


$（文档）.ready（函数（）{
$（'#divContainer img'）。在（'click'，function（）上{
$（this）.addClass（'active'）。同胞（'img'）。removeClass（'active'）；
var imgURl=$（this.attr（'src'）；
$（'#main image'）.fadeOut（1000，function（）{
$（this.attr（'src'，imgURl）；
}).fadeIn（1000）；
});
});
.imgStyle:悬停{
边框颜色：黑色；
}
伊姆斯泰尔先生{
高度：100px；
宽度：100px；
边框：2倍纯色灰色；
}
.主动{
边框颜色：红色；
}




从单击图像的
同级
中删除
active
类


$（文档）.ready（函数（）{
$（'#divContainer img'）。在（'click'，function（）上{
$（this）.addClass（'active'）。同胞（'img'）。removeClass（'active'）；
var imgURl=$（this.attr（'src'）；
$（'#main image'）.fadeOut（1000，function（）{
$（this.attr（'src'，imgURl）；
}).fadeIn（1000）；
});
});
.imgStyle:悬停{
边框颜色：黑色；
}
伊姆斯泰尔先生{
高度：100px；
宽度：100px；
边框：2倍纯色灰色；
}
.主动{
边框颜色：红色；
}



创建2个变量：

                Var currentslide;

                var oldSlide;

在函数中添加

 At the top :

                 OldSlide= currentSlide;

                CurtentSlide=$(this);

然后将该类添加到currentSlide，
并将其从当前幻灯片中删除

很抱歉，我正在通过电话写信。
创建2个变量：

                Var currentslide;

                var oldSlide;

在函数中添加

 At the top :

                 OldSlide= currentSlide;

                CurtentSlide=$(this);

然后将该类添加到currentSlide，
并将其从当前幻灯片中删除

很抱歉使用了sintax，但我正在通过电话进行写作。
还添加了
$（this）.sides（'img'）。removeClass（'active'）现在，全部幻灯片放映不起作用。它正在选择所有的thumb图像这里是Add
$（'divContainer img'）.removeClass（'active'）在
$（this.addClass（'active'）之前。这工作正常$（“#divContainer img”）.removeClass（'active'）；在这里，如果我使用“this”而不是#divContainer img，它将不起作用。你能告诉我为什么吗？感谢advanceAlso添加
$（this）.sillides（'img'）.removeClass（'active'）现在，全部幻灯片放映不起作用。它正在选择所有的thumb图像这里是Add
$（'divContainer img'）.removeClass（'active'）在
$（this.addClass（'active'）之前。这工作正常$（“#divContainer img”）.removeClass（'active'）；在这里，如果我使用“this”而不是#divContainer img，它将不起作用。你能告诉我为什么吗？谢谢你提前通知