Javascript 单击另一个跨距后，如何从另一个跨距中删除此背景色

我做了一个跨距，当我点击它的链接时有一个背景色，但当我点击另一个跨距时，我希望另一个跨距的背景色被删除并显示在当前跨距中。请问我该怎么做

CSS

                list-style: none;
                font-size: 14px;
                padding: 7px 0px 7px 23px;
            }

            ul li a {
                color: #676a74;
                text-decoration: none;
            }

            ul li a span {
                float: left;
                width: 11px;
                height: 11px;
                margin-left: -13px;
                margin-right: 5px;
                top: 4px;
                border: 1px solid #d1d3d7;
                position: relative;
                transition: all 0.5s ease-in-out;
            }

            ul li a span.active {
                background: green;
            } 

HTML

            <li>
                <a href=""><span class="list"></span>Electronics</a>
            </li>
            <li>
                <a href=""><span class="list"></span>Clothes</a>
            </li>
            <li>
                <a href=""><span class="list"></span>Home & Office</a>
            </li>
        </ul>

这应该行得通

$(".list").removeClass("active");
$(this).addClass("active");

---

单击标记时，从所有列表类中删除活动类。现在将活动类添加到span，该span是单击的标记的子级

$（'a'）。单击（函数（）{
$（“.list”）.removeClass（“活动”）；
$（this）.children（'.list'）.addClass（'active'）；
})

ul{
列表样式：外部无；
}
ullia{
颜色：#676a74；
文字装饰：无；
}
ulli是一个跨度{
浮动：左；
宽度：11px；
高度：11px；
左边距：-13px；
右边距：5px；
顶部：4px；
边框：1px实心#d1d3d7；
位置：相对位置；
过渡：所有0.5s缓进缓出；
}
ulli a span{
背景：绿色；
}

首先，从所有span中删除活动，然后将活动添加到单击的span中

$(".list").removeClass("active");
$(this).addClass("active");