Pseudo active class not working in scss file - html

Question

Not Working
This is my simple header of navigation and logo
<header>
<div class="logo" style="width: 11%;">
<img src="Images/logo.png" style="width: 100%;">
</div>
<nav>
<ul>
<li>
<a href="#" >HOME</a>
</li>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
CONTACT US
</li>
<li>
TESTIMONIALS
</li>
<li>
FAQ
</li>
<li>
CONTACT US
</li>
</ul>
</nav>
</header>
My CSS in which active class is not working while others are working well
li
{
display: inline-block;
font-size: 18px;
a
{
display: inline-block;
color:$secondary;
padding: 17px;
&:active
{
padding: 10px;
background : blue;
font-weight: bold;
}
}
}
Whether you use hover or focus it will work but active pseudo class is not in progress
can anyone help

Answer 1

Your confused between pseudo-classes and CSS classes what you need here is a CSS class to be set on the active list item and to do that you need to add some JS
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("li");
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";
});
}
li{
display: inline-block;
font-size: 18px;
a
{
display: inline-block;
color: gray;
padding: 17px;
}
}
.active{
padding: 10px;
background : blue;
font-weight: bold;
}
<header>
<div class="logo" style="width: 11%;">
<img src="Images/logo.png" style="width: 100%;">
</div>
<nav>
<ul id="myDIV">
<li class="li active">
<a href="#" >HOME</a>
</li>
<li class="li">
ABOUT US
</li>
<li class="li">
SERVICES
</li>
<li class="li">
CONTACT US
</li>
<li class="li">
TESTIMONIALS
</li>
<li class="li">
FAQ
</li>
<li class="li">
CONTACT US
</li>
</ul>
</nav>
</header>