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

**URL:** <https://forum.kirupa.com/t/why-the-li-not-active-when-i-click-on-it/639527>\
**Category:** web dev\
**Created:** [March 21, 2019, 4:48am UTC](https://forum.kirupa.com/t/why-the-li-not-active-when-i-click-on-it/639527 "2019-03-21T04:48:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hao](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hao](https://forum.kirupa.com/u/hao)\
**Post date:** [March 21, 2019, 4:48am UTC](https://forum.kirupa.com/t/why-the-li-not-active-when-i-click-on-it/639527/1 "2019-03-21T04:48:32Z")

</div>

```auto
    <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>

```