javascript - 一个选项卡上的问题，for中创建的变量显示未定义。-PHP中文网问答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;font-size:14px;}
        ul{list-style: none;}
        li{ float: left;margin:10px 15px 0 20px ;text-align: center;border: 1px solid #CCC;padding: 3px 5px;}
        p{width: 250px;clear: both;margin-left:20px; border: 2px solid #ccc;display: none;}
        .active{border-top-color: red}
        .
    </style>
    <script>        
window.onload=function(){
            var li=document.getElementsByTagName('li');
            var op=document.getElementsByTagName('p');
            for(var i=0;i<li.length;i++){
                
                li[i].onclick=function(){
                    for(var j=0;j<op.length;j++){
                        li[i].className='';  
                 //为什么这里的i会报错未定义，在这个onclick事件中应该能访问到函数之外的变量呀。
                        op[j].style.display='none';
                    }
                    this.className='active';
                    op[j].style.display='block'  
                    //这里的j也是一样的情况。
                }
            }
        }
    </script>
</head>
<body>
    <ul>
        <li class="active">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
        <p class="active" style="display: block;">
            1
        </p>
        <p>2</p>
        <p>3</p>
</body>
</html>

for(var i=0;i<li.length;i++){ li[i].index=i;//添加索引值 li[i].onclick=function(){ for(var j=0;j<op.length;j++){ li[this.index].className=''; op[j].style.display='none'; }//执行完for循环之后，j=3 this.className='active'; op[this.index].style.display='block' } }

window.onload=function(){ var li=document.getElementsByTagName('li'); var op=document.getElementsByTagName('p'); for(var i=0;i<li.length;i++){ (function(i){ li[i].onclick=function(){ for(var j=0;j<op.length;j++){ li[i].className=''; op[j].style.display='none'; } this.className='active'; op[i].style.display='block' } })(i) } }