如何使用 JavaScript 代码在活动 li 上添加类

How can I add class on active li with JavaScript code

本文关键字：li 添加 活动 何使用 JavaScript 代码      更新时间：2023-09-26
<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>

如何使用 JavaScript 在 li 标签上添加活动类。在这里，我尝试这样做。它正在工作，但无法正常工作。我在这里为标签做。

根据评论，我想你期待这个：

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>

如果你有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，可能适用于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');
});
相关文章：