原生js实现菜单动态添加active类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js实现菜单动态添加active类</title>
<link rel="stylesheet" href="css/">
</head>
<body>
<ul id="nav">
<li class="active">首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
<li>联系我们</li>
</ul>
<script>
function removeActiveClass(node) {
node.className = '';
}
let menus = document.querySelectorAll('#nav');
menus.forEach(function (value, index) {
value.addEventListener('click', function (e) {
var target = e.target;
Array.prototype.forEach.call(document.querySelectorAll('#nav li'), removeActiveClass);
target.className = 'active';
})
});
</script>
</body>
</html>