Javascript 如何在不使用ID的情况下访问/编辑HTML元素

我有一个菜单项，我想通过设置一个类来更改我们单击的菜单项的bg颜色。不使用ID引用就可以这样做吗？例如：如果我点击菜单4，函数应该单独设置一个类为

li

<ul class="navList">
    <li onclick="setActive();">menu 1</li>
    <li onclick="setActive();">menu 2</li>
    <li onclick="setActive();">menu 3</li>
    <li onclick="setActive();">menu 4</li>
    <li onclick="setActive();">menu 5</li>
</ul>

菜单1
菜单2
菜单3
菜单4
菜单5

检查代码段

功能设置激活（obj）{
obj.style.background=“红色”；
}

菜单1
菜单2
菜单3
菜单4
菜单5

将

此

（指当前元素）传递到

设置活动功能中。从那里，您可以使用函数中的引用设置背景颜色（现在称为
obj
）：

李：

<li onclick="setActive(this);">menu 1</li>

菜单1

将事件绑定到ul元素，并使用

事件访问目标LI。目标

然而，在jQuery中，它很简单，可以按如下方式完成：

$(".navList").on("click", "li", function () {
    $(".navList li").removeClass("bgColor");
    $(this).addClass("bgColor");
});

检查以下jQuery和非jQuery实现的JSFIDLE链接：

非jquery版本（vanilla js）：

jQuery版本：

---

很多可能性，我演示了一个完整的：

//您使用onclick属性-这对于js是一种不好的做法，会弄乱html部分，最好选择：
document.getElementById（“l”）.addEventListener(
“单击”，函数（）{
单击CalledFunction（调用此函数）；
}
);
函数单击调用函数（t）{
event.preventDefault（）；//不要返回false，但要防止以下链接href
var tag=document.getElementsByTagName（“a”）；
警报（“byTagName:+tag+”+tag[0].innerHTML）；
标记[0]。textContent=“计数：1”//textContent将延迟更新
var c=document.getElementsByClassName（“链接”）；
警报（“byClassName:+c[0].innerHTML）；
//c[0].textContent=“计数：2”；
var name=document.getElementsByName（“锚”）；
警报（“别名：+name[0]）；
//名称[0]。textContent=“计数：3”；
警报（“byEventMember:+t.innerHTML）
警报（t.href）；
//现在自己做链接，也许：
//window.location.href=t.href；
}

---

为什么不使用css？@TeymurMardaliyerLennon，因为当用户单击其他菜单时（在单击一个菜单后），活动状态应该被更改，前一个菜单的活动状态应该被删除。

$(".navList").on("click", "li", function () {
    $(".navList li").removeClass("bgColor");
    $(this).addClass("bgColor");
});