3个div点击切换box-shadow样式的实现需求与代码优化咨询

我来帮你调整代码，完美实现你要的交互效果～ 原代码的问题在于用了focus和blur事件（div默认不支持这些事件），而且没有处理点击当前元素时清除其他元素阴影的逻辑，下面是修正后的方案：

推荐方案：用CSS类管理样式（更易维护） #

这种方式把样式和JS逻辑分离，是前端开发的最佳实践：

1. 先定义CSS样式类 #

.boxshadow {
  /* 你的div基础样式，比如宽高、边框等 */
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  cursor: pointer; /* 添加上手型光标，提升交互体验 */
}

.active-shadow {
  box-shadow: inset 0 1px 1px #dab6b6, 0 0 8px #da0707;
}

2. 修正后的JS代码 #

$(document).ready(function() { 
    $(".boxshadow").on('click', function() { 
        // 先移除所有.boxshadow元素的阴影类
        $(".boxshadow").removeClass("active-shadow");
        // 给当前点击的元素添加阴影类
        $(this).addClass("active-shadow");
    }); 
});

直接操作CSS的方案（不推荐，但也能实现） #

如果你不想用CSS类，也可以直接操作元素样式，但维护性较差：

$(document).ready(function() { 
    $(".boxshadow").on('click', function() { 
        // 清除所有.boxshadow的box-shadow
        $(".boxshadow").css({ "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707" });
        // 给当前元素设置阴影
        $(this).css({ "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707" });
    }); 
});

为什么原代码不生效？ #

• focus和blur事件只适用于表单元素（如input、button）或设置了tabindex的元素，普通div默认不会触发这些事件，所以换成click事件才对。
• 原代码没有处理“点击新元素时清除旧元素阴影”的逻辑，导致多个元素会同时有阴影。

内容的提问来源于stack exchange，提问作者Arslan