我正在制作侧边栏,我需要更改 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也可以使用。
答案 0 :(得分:0)
您可以使用 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>