-1

I`m making sidebar, and I need to change background of the div.Now, when I hover it it shows me this:

So this I need to do, when it is clicked, and of course, when I click at another div (for example "Search"), this background dissapears at "Home", and shows at "Search".

My code:

                    <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);
}

Will be better if all code will be written on the css, but JS can also use.

0

1 Answer 1

0

You can switch an active class using javascript though all your sidebar options like in this fiddle.. I'm including the code also

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.