I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I want it to work seamlessly without having to reload the page.
Here is the HTML code for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sidebar.css">
</head>
<body>
<div class="sidebar">
<ul id="menu">
<li class="list">
<a href="dashboard.php">
<span class="icon"><i class="fa fa-tachometer" aria-hidden="true"></i></span>
<span class="item">Dashboard</span>
</a>
</li>
<li class="list">
<a href="sales.php">
<span class="icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
<span class="item">Sales</span>
</a>
</li>
...
</ul>
</div>
<script type="text/javascript">
// Function to add active class to clicked button
var header = document.getElementById("menu");
var btns = header.getElementsByClassName("list");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
</body>
</html>
Here is the CSS code:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
.sidebar{
background: #484848;
position: fixed;
top: 52px;
left: 0px;
bottom: 20px;
width: 300px;
height: 100%;
box-shadow: 7px 5px 10px black;
}
.sidebar ul{
...
.sidebar ul li a:hover{
color: black;
font-weight: bold;
}
Check out the screenshot for a visual representation:
Screenshot: https://i.sstatic.net/nAlQ7.png