时间戳

首页 > 解决方案 > 单击 div 时更改背景

javascript - 单击 div 时更改背景

问题描述

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

所以我需要这样做，当它被点击时，当然，当我点击另一个 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也可以使用。

标签： javascripthtmlcssreactjs

解决方案

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

.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>

推荐阅读