使用JavaScript为Div添加active类：小图激活状态显示问题

问题根源 #

你的代码存在3个关键错误导致激活状态无法正确标识：

1. changeImage函数未接收事件参数e，调用e.target会直接报错
2. 类选择器语法错误：document.querySelectorAll("activeclick")缺少类选择器前缀.，无法选中对应元素
3. 直接替换className会覆盖原有clickimage类，导致小图基础样式丢失

修改方案 #

1. 更新函数参数与调用：给changeImage添加事件参数e，HTML中调用时传入event
2. 修正类选择器：将querySelectorAll("activeclick")改为querySelectorAll(".activeclick")
3. 正确操作类名：移除所有元素的activeclick类后，给当前点击元素添加该类，保留原有clickimage类

修改后的完整代码 #

CSS（无需修改）

.container{
display:flex; 
  flex-wrap:wrap; 
  gap:30px; 
  justify-content: center; 
  margin-top: 20px;
}
.img-responsive{
max-width:100%;
}
.activeclick {
filter: grayscale(0%)!important;
}

.clickimage {
filter: grayscale(100%);
cursor:pointer; 
width: 195px; 
height: 61px; 
background-size: contain;
}

HTML & JavaScript

<div style="max-width: 1024px;">
    <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" />
    <div class="container">
        <div class="clickimage activeclick" onclick="changeImage('https://abload.de/img/15iiid.jpg', event)" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); ">
        </div>

        <div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg', event)" style="background-image: url(https://abload.de/img/click2bwddr.jpg);">
        </div>

        <div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg', event)" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); ">
            &nbsp;
        </div>
    </div>
</div>
<script>   
    function changeImage(fileName, e){
     let img = document.querySelector("#Images");
        img.setAttribute("src", fileName);
      
        // 移除所有元素的激活类
        var elems = document.querySelectorAll(".activeclick");
        elems.forEach(el => el.classList.remove("activeclick"));
        // 给当前点击元素添加激活类
        e.target.classList.add("activeclick");
    }
</script>

效果说明 #

修改后点击小图时，会先清除所有小图的激活状态，再给当前点击的小图添加激活类，通过灰度滤镜的切换清晰标识出当前选中的小图，同时保留小图的基础样式。

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