Here is the code snippet I am currently working with:
$("li span").click(function() {
$("li span").each(function() {
$(this).css("background-color", "transparent");
});
$(this).css("background-color", "#ff3300");
});.highlight {
background: green;
}
span {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="left-menu-inner scroll-pane">
<ul class="left-menu-list left-menu-list-root list-unstyled">
<li class="left-menu-list-active">
<div class="left-menu-link">
<a href="dashboard">
<i class="left-menu-link-icon icmn-home2"><!-- --></i>
<span class="menu-top-hidden">Dashboard</span>
</a>
</li>
</ul>
</div>Additionally, I have also tried another code snippet which is as follows:
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
However, both of the codes are only applying highlighting on mouseover and not maintaining the highlight when clicked.