Why the <li> not active when i click on it

programming web dev
1 
    <style>
      .li:hover {
          background-color: #dcdfe5;
          cursor: pointer;
      }
      .active, .li:hover {
        background-color: #dcdfe5;
        color: white;
      }
    <style>

<div class="collapse navbar-collapse" id="myDIV">
        <ul class="nav navbar-nav navbar-left">
          <li class="List"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
          <li class="List"><a href="{{ route('bicycle.index') }}">Bike</a></li>
          <li class="List"><a href="{{ route('sales.index') }}">Sales</a></li>
        </ul>
</div>
    <script>
    // Add active class to the current button (highlight it)
      var header = document.getElementById("myDIV");
      var list = header.getElementsByClassName("List");
      for (var i = 0; i < list.length; i++) {
        list[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>