用原生JS实现点击li的时候 给ui下的li的class添加active 其他的li的class被移除

Question

.active{
    backround:red;
}
<div class="por">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

Answer 1

<style>
.active {background: red;}
</style>
<div class="por">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    var li = document.querySelectorAll('.por li');
    for (var i = 0; i < li.length; i++)
        li[i].onclick = function () {
            for (var i = 0; i < li.length; i++) li[i].className = '';
            this.className='active'
        }
</script>

Answer 2

<style>
.active {background: red;}
</style>
<div class="por">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    var li = document.querySelectorAll('.por li');
    for (var i = 0; i < li.length; i++)
        li[i].onclick = function () {
            for (var i = 0; i < li.length; i++) li[i].className = '';
            this.className='active'
        }
</script>

Answer 3

for循环里面嵌套for循环还能用i吗？

Answer 4

for循环里面嵌套for循环还能用i吗？
一般的for循环嵌套for循环是双重循环，双重循环通常是在同一作用域中不能用同名的循环变量的。
但这个代码却不是双重循环，里面的for循环是在onclick事件中，与外面的for循环没有什么关系，两个循环不在同一作用域。
外面的for循环只是为li绑定事件，并不执行里面的for循环。
只有事件触发时才执行里面的for循环，这时外面的for循环早就执行完了。
外面循环变量i在事件中是不需要的，就可以用同名的循环变量（有使用闭包的情况除外）