Add active class to li onclick javascript

<ul class="nav nav-tabs">
    <li onclick="this.className='active'"><a href="#">Home</a></li>
    <li onclick="this.className='active'"><a href="#">Menu 1</a></li>
    <li onclick="this.className='active'"><a href="#">Menu 2</a></li>
    <li onclick="this.className='active'"><a href="#">Menu 3</a></li>
</ul>

How can I add active class on li tag with JavaScript. Here I am try to do it. It is working but not properly. I am doing for tabs here.

asked Mar 27, 2016 at 18:19

As per the comments, I guess you are expecting this:

var a = document.querySelectorAll(".nav li a");
for (var i = 0, length = a.length; i < length; i++) {
  a[i].onclick = function() {
    var b = document.querySelector(".nav li.active");
    if (b) b.classList.remove("active");
    this.parentNode.classList.add('active');
  };
}

.active {
  background-color: #0f9;
}

<ul class="nav nav-tabs">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Menu 1</a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
  </li>
</ul>

Rayon

35.6k4 gold badges46 silver badges70 bronze badges

answered Mar 27, 2016 at 18:20

13

if you have jquery

<ul class="nav nav-tabs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<style>
 .active {background-color: #0f9;}
</style>
<script type="text/javascript">
$("ul.nav.nav-tabs").on('click', 'li', function(){
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});
</script>

Vanilla JavaScript (ES6 where I tested, might work on ES5)

const elm = document.querySelector('ul');
elm.addEventListener('click', (el) => {
  const elActive = elm.querySelector('.active');
  if (elActive) {
    elActive.removeAttribute('class');
  }
  el.target.setAttribute('class', 'active');
});

answered Mar 27, 2016 at 18:35

a45ba45b

4793 silver badges19 bronze badges

5

Learn how to add an active class to the current element with JavaScript.

Highlight the active/current (pressed) button:

Try it Yourself »

Active Element

Step 1) Add HTML:

Example

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

Step 2) Add CSS:

Example

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Step 3) Add JavaScript:

Example

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
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";
  });
}

Try it Yourself »

If you do not have an active class set on the button element to start with, use the following code:

Example

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}

Try it Yourself »

How do I add active class to UL Li?

How do I add a current class to an active link?

How do you add active class on click in react?

How do I add active class to a navigation menu?