js当前被点击的列表项字体变为红色
时间: 2023-09-26 22:13:58 浏览: 54
您可以使用以下JavaScript代码来实现您的要求:
```
// 获取所有列表项
var listItems = document.getElementsByTagName("li");
// 添加单击事件处理程序
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("click", function() {
// 取消所有列表项的红色字体
for (var j = 0; j < listItems.length; j++) {
listItems[j].style.color = "black";
}
// 将当前列表项的字体变为红色
this.style.color = "red";
});
}
```
这段代码将获取所有列表项,并为每个列表项添加单击事件处理程序。当单击列表项时,代码将取消所有列表项的红色字体,并将当前列表项的字体变为红色。
相关问题
jquery只有当前被点击的列表项字体变为红色
使用 jQuery 可以简化 JavaScript 代码,实现当前被点击的列表项字体变为红色的效果。您可以使用以下代码:
```javascript
// 添加单击事件处理程序
$("li").click(function() {
// 取消所有列表项的红色字体
$("li").css("color", "black");
// 将当前列表项的字体变为红色
$(this).css("color", "red");
});
```
这段代码将为所有 `li` 元素添加单击事件处理程序。当单击列表项时,代码将取消所有列表项的红色字体,并将当前列表项的字体变为红色。
jquery只有当前被点击的列表项内的a标签内的字体变为红色
如果您只想将当前被点击的列表项内的 `a` 标签内的字体变为红色,可以使用以下 jQuery 代码:
```javascript
// 添加单击事件处理程序
$("li").click(function() {
// 取消所有列表项的红色字体
$("li a").css("color", "black");
// 将当前列表项内的 a 标签字体变为红色
$(this).find("a").css("color", "red");
});
```
这段代码将为所有 `li` 元素添加单击事件处理程序。当单击列表项时,代码将取消所有列表项内的 `a` 标签的红色字体,并将当前列表项内的 `a` 标签字体变为红色。
其中,`$(this).find("a")` 通过 `find` 方法查找当前列表项内的 `a` 标签。