单击 div 时更改背景答案

【问题标题】：when div is clicked change background单击 div 时更改背景
【发布时间】：2021-04-11 20:22:22
【问题描述】：

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

所以我需要这样做，当它被点击时，当然，当我点击另一个 div（例如“搜索”）时，这个背景会在“主页”消失，并显示在“搜索”。

我的代码：

                    <div className="navbar" id ="home">
                        <HomeIcon/><span>Home</span>
                    </div>

                    <div className="navbar" id="search">
                        <img src="img/search-navbar.svg" /><span>Search</span>
                    </div>

                    <div className="navbar" id="library">
                        <ListIcon/><span>Your Library</span>
                    </div>

.navbar{
    display:flex;
    align-items: center;
    vertical-align: middle;
    padding-left:10px;
    color:white;
    opacity:1;
    cursor: pointer;
    border-radius:5px;
    opacity:0.7;
    height:39px;
    width:91%;
    margin-left:auto;
    margin-right:auto;
    transition: 0.5s;
}
.navbar:hover{
  
    background: rgba(225, 225, 225, .2);
    opacity:1;
    transform: translateY(-2px);
}

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您可以使用 javascript 通过所有侧边栏选项（例如 in this fiddle.）切换活动类。我也包括代码

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

.active{
background:#f00;
}

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>

【讨论】：