如何实现JavaScript中li标签的点击效果
作为一名经验丰富的开发者，我将向你展示如何实现JavaScript中li标签的点击效果。首先，让我们来看一下整个实现流程：
stateDiagram
[*] --> 点击li标签
点击li标签 --> 改变样式
接下来，让我们逐步来实现这个过程。首先，我们需要创建一个HTML文件，并在其中添加一些li标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickable LI Tag</title>
</head>
<body>
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个ul列表，并添加了三个li标签，每个li标签都有一个唯一的id。接下来，我们需要编写JavaScript代码来实现点击li标签改变样式的效果。请在同一目录下创建一个名为script.js的JavaScript文件，然后添加以下代码：
const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', function() {
this.style.color = 'red'; // 点击li标签时改变字体颜色为红色
});
});
在上面的代码中，我们首先使用document.querySelectorAll方法选择所有的li标签，并将它们存储在items变量中。然后，我们使用forEach方法遍历所有的li标签，并为每个li标签添加一个点击事件监听器。当用户点击li标签时，我们改变其字体颜色为红色。现在，当你点击任何一个li标签时，它的字体颜色将变为红色。
希望通过这篇文章，你能够学会如何在JavaScript中实现li标签的点击效果。祝你编程愉快！
