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

[weixin_37381475]

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

[斯洛文尼亚旅游]

<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>

[qq_34502692]

引用 2 楼 weixin_44446326 的回复:

<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>

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

[天际的海浪]

引用 3 楼 qq_34502692 的回复:

[quote=引用 2 楼 weixin_44446326 的回复:] <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>

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

[weixin_44446326]

<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>