javascript - 如何使用 JavaScript 代码在事件 li 上添加类

标签 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>

如何使用 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>

关于javascript - 如何使用 JavaScript 代码在事件 li 上添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36250901/

相关文章:

javascript写入文本框在iPhone上不工作但在PC上工作

javascript - css 动画不适用于新的 dom 元素

javascript - 如何使用自定义提示解锁以太坊帐户?

javascript - 即使在显示捆绑有效消息后,Webpack-dev-server 也不捆绑

javascript - 如何检测工具提示何时在 chart.js 中关闭?

javascript - 如何修复导致 IE 8 故障的自定义 Kendo UI 主题 CSS?

javascript - 如何使用 JavaScript 仅打印 Sharepoint 中创建的列

javascript - JSON 响应 Long 被舍入或损坏

javascript - 使用 flask 从传单 map 收集数据

javascript - 使用javascript编辑上传的文件客户端