如何用jQuery实现点击div添加类：点击项变灰，前项变红

没问题，我来帮你搞定这个需求！下面是完整的实现方案，包括HTML结构和jQuery代码，每一步我都会给你解释清楚。

第一步：准备HTML结构 #

首先我们需要几个可点击的div，给它们统一的类名方便jQuery选择，示例如下：

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>

可以给这些盒子加个基础样式让它们更直观：

.box {
    width: 200px;
    height: 50px;
    margin: 10px 0;
    background-color: white;
    border: 1px solid #ccc;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

第二步：编写jQuery逻辑 #

接下来就是核心的点击事件代码，我会确保只触发被点击的div的效果，同时重置其他div的状态：

$(document).ready(function() {
    // 给所有.box绑定点击事件
    $('.box').click(function() {
        // 第一步：重置所有盒子的样式——移除active类，背景改回白色
        $('.box').removeClass('active').css('background-color', 'white');
        
        // 第二步：处理当前被点击的盒子——添加active类，背景设为灰色
        $(this).addClass('active').css('background-color', 'gray');
        
        // 第三步：处理当前盒子的前一个兄弟盒子——背景设为红色
        $(this).prev('.box').css('background-color', 'red');
    });
});

代码解释 #

• $(document).ready(...)：确保DOM加载完成后再执行jQuery代码，避免找不到元素的问题。
• $('.box').click(function() { ... })：给所有带.box类的div绑定点击事件。
• $('.box').removeClass('active').css('background-color', 'white')：每次点击时先重置所有盒子的状态，保证只有被点击的盒子和它的前一个有特殊样式，其余都是默认白色。
• $(this).addClass('active').css('background-color', 'gray')：$(this)指代当前被点击的div，给它添加你需要的类（比如active，你可以根据需求自定义类名和样式），同时把背景改成灰色。
• $(this).prev('.box').css('background-color', 'red')：prev('.box')会找到当前div的前一个同类型兄弟元素，如果是第一个div，这一步不会报错，因为jQuery会自动忽略不存在的元素。

这样就能完美实现你要的效果啦！

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