Javascript 单击div时，请更改背景

我正在制作侧边栏，我需要更改div的背景。现在，当我悬停它时，它会显示我

所以我需要这样做，当它被点击时，当然，当我点击另一个div（例如“Search”）时，这个背景在“Home”中消失，并显示在“Search”中

我的代码：

家
搜寻
你的图书馆

.navbar{
显示器：flex；
对齐项目：居中；
垂直对齐：中间对齐；
左侧填充：10px；
颜色：白色；
不透明度：1；
光标：指针；
边界半径：5px；
不透明度：0.7；
高度：39px；
宽度：91%；
左边距：自动；
右边距：自动；
过渡：0.5s；
}
.导航栏：悬停{
背景：rgba（225225225.2）；
不透明度：1；
transform:translateY（-2px）；
}

---

如果所有代码都写在css上会更好，但是JS也可以使用。

您可以使用javascript切换一个活动类，尽管您的所有侧栏选项都像这样。 我还包括代码

.box{
height:60px;
width:200px;
font-size:15px;
background:#ebebeb;
display:flex;
align-items:center;
justify-content:center;
}

.active{
background:#f00;
}

这是Div 1

这是第2部分

这是第3部分

这是第4部分

我是第五组

var prev=document.querySelector(".box");
function active(e){
prev.classList.remove("active");
e.classList.add("active");
prev=e;
}

<div onclick="active(this)" class="box active">This is Div 1</div><br>
<div onclick="active(this)" class="box">This is Div 2</div><br>
<div onclick="active(this)" class="box">This is Div 3</div><br>
<div onclick="active(this)" class="box">This is Div 4</div><br>
<div onclick="active(this)" class="box">This is Div 5</div>