点击同class链接时，切换对应目标元素的active类实现问题

首先，我们需要给每个触发链接（.trigger）添加自定义属性来关联对应目标元素，以此建立点击动作和目标元素的明确对应关系。

步骤1：修改HTML结构 #

给每个<a>标签添加data-target属性，值为对应颜色元素的选择器：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger" data-target=".red">Link 1</a>
<a href="#" class="trigger" data-target=".pink">Link 2</a>
<a href="#" class="trigger" data-target=".blue">Link 3</a>
<a href="#" class="trigger" data-target=".green">Link 4</a>

<div class="main">
    <div class="red basic"></div>
    <div class="pink basic"></div>
    <div class="blue basic"></div>
    <div class="green basic"></div>
</div>

步骤2：更新JavaScript逻辑 #

在你现有代码基础上，添加目标元素active类的切换逻辑：

$(".trigger").click(function(e){
    e.preventDefault(); // 阻止链接默认跳转行为
    // 处理触发链接的checked类切换
    $('.trigger').removeClass('checked');
    $(this).addClass('checked');
    
    // 处理目标元素的active类切换
    const targetSelector = $(this).data('target');
    $('.basic').removeClass('active'); // 移除所有basic元素的active类
    $(targetSelector).addClass('active'); // 给对应目标元素添加active类
});

步骤3：添加active类的样式（可选） #

为了直观区分active状态，给active类添加样式示例：

.main{
    position: relative;
    width: 500px;
    height: 500px;
}

.basic{
    width: 300px;
    height: 300px;
    position: absolute;
    right: 0;
    transition: all 0.3s ease;
}

.red {
    background-color: red;
}
.pink {
    background-color: pink;
}
.blue{
    background-color: blue;
}
.green {
    background-color: green;
}

/* active状态样式 */
.basic.active {
    border: 5px solid #000;
    transform: scale(1.05);
}

/* 选中触发链接的样式 */
.trigger.checked {
    color: #ff0000;
    font-weight: bold;
}

逻辑说明 #

• data-target属性：建立触发链接和目标元素的一一对应关系，比依赖元素索引更灵活，后续修改元素顺序或新增元素时无需调整JS逻辑。
• e.preventDefault()：避免点击#链接时页面跳转至顶部。
• 先移除所有元素的active类再添加目标元素的类，确保同一时间只有一个元素处于active状态。

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