js点击列表文字对应该行显示背景颜色的实现代码

今天，我要和大家分享一个非常实用的JavaScript技巧，那就是如何实现在点击列表文字时，让对应的行显示背景颜色。这是一个非常实用的功能，特别是在创建交互式网页和应用程序时。如果你是一个前端开发者，或者对JavaScript感兴趣的小伙伴，那么一定要继续往下看。

我们来谈谈CSS部分。为了产生背景色变化的效果，我们需要为列表项定义一个初始样式和一个点击后的样式。在CSS中，我们可以使用`.cur`类来实现这个效果。例如，我们可以设置`.cur`类的背景颜色为红色。为了让列表项可点击，我们将`cursor`属性设置为`pointer`。

接下来是JavaScript部分。当页面加载完成后，我们需要获取所有的列表项元素，并为每一个元素绑定一个点击事件处理器。在点击事件处理器中，我们会遍历所有的列表项，将它们的类名设置为空（即移除所有类），然后只给被点击的列表项添加`cur`类，从而实现背景颜色的变化。

这就是整个实现过程。运行这段代码后，你会看到一个列表，当你点击某个列表项时，只有该项的背景颜色会发生变化。这种效果在网页特效中非常常见，可以大大提高用户体验。

以下是代码示例：

HTML部分：

```html

```

CSS部分：

```css

li { cursor: pointer; }

.cur { background: red; }

```

JavaScript部分：

```javascript

window.onload = function() {

var aLi = document.getElementsByTagName("li");

for (var i = 0; i < aLi.length; i++) {

aLi[i].onclick = function() {

for (var j = 0; j < aLi.length; j++) aLi[j].className = "";

this.className = "cur";

};

}

};

```

希望这篇文章对你有所帮助，让你对JavaScript的交互功能有更深入的了解。如果你有任何问题或想法，欢迎与我交流。让我们一起学习，一起进步！