<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
color: black;
}
ul li.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 通过标签名来获取节点对象
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i].onclick = function(){
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
}
this.className = 'active';
}
}
</script>
</body>
</html>初始化后，第一个<li>标签的innerText值为红色。
经测试，无论点击哪一个<li>标签，任何时候只有一个<li>标签中的innerText为红色。
比如我单击第三个<li>标签，最外层循环开始运行，我所理解的运行过程如下：
i = 0， 不执行循环体中的代码，所有<li>标签的class值不变。
i = 1， 不执行循环体中的代码，所有<li>标签的class值不变。
i = 2，执行循环体中的代码，先经过j=0到j=4，所有<li>标签的class值为空，然后运行this.className=‘active’使第三个<li>标签的class值改为active。
i = 3， 不执行循环体中的代码，所有<li>标签的class不变。
i = 4， 不执行循环体中的代码，所有<li>标签的class不变。
-----------------------------------------------------------------------------------------------------------------------------
现在在第一层循环中第一行添加 lis[i].className = 'active' 这个语句，实际结果与我所理解的循环过程不一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
color: black;
}
ul li.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 通过标签名来获取节点对象
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i].className = 'active';
lis[i].onclick = function(){
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
}
this.className = 'active';
}
}
</script>
</body>
</html>初始化后，所有的<li>标签的innerText值为红色。
比如我单击第三个<li>标签，开始i所在的循环5次，我所理解的运行过程如下：
i = 0， 只执行lis[i].className = 'active' 语句，所有<li>标签的class值为active。
i = 1， 只执行lis[i].className = 'active' 语句，所有<li>标签的class值为active。
i = 2，执行lis[i].className = 'active' 语句，所有<li>标签的class值为active；执行循环体中的代码，先经过j=0到j=4，所有<li>标签的class值为空，然后运行this.className=‘active’使第三个<li>标签的class值改为active。
i = 3， 只执行lis[i].className = 'active' 语句，所有<li>标签的class值为active。（实际测试，i = 3 好像没有运行，因为只有第三个<li>标签的innerText为红色）
i = 4， 只执行lis[i].className = 'active' 语句，所有<li>标签的class值为active。（实际测试，i = 4 好像没有运行，因为只有第三个<li>标签的innerText为红色）
----------------------------------------------------------------------------------------------------------------------------
两段代码，不同的地方只有一行代码，第一段代码实际运行结果与我理解的过程是一致的，但是第二段代码的实际运行结果与我理解的过程有很大差别，我有个大胆的猜想，是不是运行完点击事件后，就直接退出最外层的i循环了？
i那层只是循环给li对象添加click事件，循环完毕绑定完后就和i没关系了，不存在点击后最外层循环开始运行这种情况，页面打开的时候就执行了，和点击没关系了
点击的时候j循环清空样式，this为当前点击的dom对象，添加active样式高亮变红
第二段只是多了个初始化所有li为高亮而已，click事件处理过程一样
你把for循环得var 换成 let 试试 循环绑定事件最后不要用var