How can I add class on active li with JavaScript code

Question

<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.

Rayon · Accepted Answer · 2016-03-27 18:43:38Z

3

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>

edited Mar 27, 2016 at 18:43

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

answered Mar 27, 2016 at 18:20

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

user3282537 Over a year ago

how can I remove class with other li

Rajaprabhu Aravindasamy Over a year ago

@user3282537 For that you have to write a dedicated event listener. You can't do all the things here in an inline handler.

Praveen Kumar Purushothaman Over a year ago

@RajaprabhuAravindasamy Added Event handler buddy.

Rayon Over a year ago

@PraveenKumar, It happens mate! querySelector would look better as you will not need [0] with that..And keep it in variable instead of selecting element twice..

Rayon Over a year ago

@PraveenKumar, Yes... Now it is better and will have less side effects.. :)

|

a45b · Accepted Answer · 2021-10-12 18:17:46Z

1

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');
});

edited Oct 12, 2021 at 18:17

answered Mar 27, 2016 at 18:35

a45b

5195 silver badges19 bronze badges

4 Comments

Praveen Kumar Purushothaman Over a year ago

No. Look here.

a45b Over a year ago

😊 I updated with Vanilla JavaScript. But I did mention if you have jquery and in my defense, I will say jQuery is JavaScript (it's a javascript library)

Praveen Kumar Purushothaman Over a year ago

Wow, why such a long time later, updating this? Anyway, I'll give you a vote up if you feel good. 😁

a45b Over a year ago

Thanks, @PraveenKumarPurushothaman :-) I actually got a notification and when click, I end up here (not sure why 🧐). I saw your comment and updated my answer. I hope it helps...

Collectives™ on Stack Overflow

How can I add class on active li with JavaScript code

2 Answers 2

13 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related