Hey everyone, I could use some assistance with customizing my sidebar design. I am trying to implement an active state in my sidebar using JavaScript. I attempted to utilize the element.css() method to apply styles when an element is clicked. However, I noticed that once I click on a list item, the hover effect specified in the CSS disappears. This seems to be because the color changes upon clicking and there is no way for it to revert back to its original styling.
var sideNav = $('.sideNav');
$('#dashboard').click(function() {
sideNav.css({
'color': '#8c8c8c',
'background-color': '#373942'
});
$('#dashboard').css({
'color': '#ccc',
'background-color': '#515461'
});
});
$('#customers').click(function() {
sideNav.css({
'color': '#8c8c8c',
'background-color': '#373942'
});
$('#customers').css({
'color': '#ccc',
'background-color': '#515461'
});
});
$('#items').click(function() {
sideNav.css({
'color': '#8c8c8c',
'background-color': '#373942'
});
$('#items').css({
'color': '#ccc',
'background-color': '#515461'
});
});
.sidebar {
background-color: #373942;
margin-left: -15px;
position: fixed;
width: 230px;
}
.sidebar ul {
padding-top: 30px;
}
.sidebar li {
color: #8c8c8c;
text-decoration: none;
list-style-type: none;
line-height: 45px;
cursor: pointer;
/*background-color: red;*/
margin-bottom: 1px;
/*margin-left: 20px;*/
padding-left: 40px;
font-size: 15pt;
}
.sidebar li:hover {
background-color: #515461;
color: #ccc;
border-left: 4px solid #8c8c8c;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li id="dashboard" class="sideNav">Dashboard</li>
<li id="customers" class="sideNav">Customers</li>
<li id="items" class="sideNav">Items</li>
</ul>
</div>