如何使用jquery，以便在按下一个互动程序时，其他互动程序恢复到其自然状态

我一排有五块瓷砖。当一块瓷砖被按下时，它会被赋予一个长方体阴影。但是，如果在按下tile 2时按下了tile 1，我需要tile 1来丢失框阴影。我正准备使用jquery来完成这项工作。为了实现这一目标，我需要对代码进行哪些更改？这是我的密码：

HTML:

CSS:

---

在将

fltsqrs2

类添加到刚才单击的类之前，只需关闭其他平铺。您可以使用

removeClass

这样做

$('.fltsqrs').removeClass("fltsqrs2");

下面是完整的示例

$（'.fltsqrs'）。单击（函数（）{
$（'.fltsqrs'）.removeClass（“fltsqrs2”）；
$（this.toggleClass（“fltsqrs2”）；
});
.fltsqrs{
浮动：左；
高度：175px；
宽度：185px；
背景色：白色；
右边距：15px；
利润上限：35px；
边界半径：30px；
}
.fltsqrs2{
盒影：0 0 5px 5px#333333；
}

财政服务

税

簿记

计划

人力资源服务

现在，无论每个元素是否在
fltsqrs2
类中，您的代码都将“切换”。这意味着，如果这些元素不属于该类，它会将
fltsqrs2
添加到它们的类属性列表中。如果元素已经属于该类，那么它将从其类属性列表中删除。这接近你想要的

问题是原始类
fltsqrs
，没有进行切换，即您的元素始终具有类
fltsqrs
，并受相应CSS的约束

简而言之，您需要切换这两个类。试试这个

$(document).ready(function() {
    $('.fltsqrs').click(function(){
        $(this).toggleClass("fltsqrs fltsqrs2");
    });
});

.fltsqrs {
    float:left;
    height:175px;
    width:185px;
    background-color:white;
    margin-right:15px;
    margin-top:35px;
    border-radius:30px;
}

.fltsqrs2 {
    box-shadow: 0 0 5px 5px #333333;
}

$('.fltsqrs').removeClass("fltsqrs2");

$(document).ready(function() {
    $('.fltsqrs').click(function(){
        $(this).toggleClass("fltsqrs fltsqrs2");
    });
});