javascript求解


<script>
window.onload=function ()
{
    var aBtn=document.getElementsByTagName('input');
    var oDiv=document.getElementsByClassName('div1');
    var i;
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index = i;
        //下面要注意
        aBtn[i].onclick=(function(_i){
            return function (){
                oDiv[_i].style.display='block';
            }
        })(i);
    };
};
</script>
javascript

解决方案 »

  1.   

    oDiv[_i].style.display='block';//让本div显示
    怎么让div的兄弟节点隐藏呢？像tab标签一样 
    在线等
      

  2.   

    匿名函数立即执行 
    解决闭包的问题
    防止oDiv[_i]中的_i为i最后的值+1
      

  3.   

    什么意思啊？
    我只是想让他的兄弟节点隐藏，在oDiv[_i].style.display='block';后加XXX.style.display='none'
    能写下代码吗？
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    .div1 {width:400px; height:300px; background:#CCC; border:1px solid #999;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title><script>
    window.onload=function ()
    {
        var aBtn=document.getElementsByTagName('input');
        var oDiv=document.getElementsByClassName('div1');
        var i;
        for(i=0;i<aBtn.length;i++)
        {
            aBtn[i].index = i;
            //下面要注意

            aBtn[i].onclick=(function(_i){
                return function (){
                    oDiv[_i].style.display='block';
                }
            })(i);
        };
    };
    </script>
    </head><body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
    <div class="div1">11111
    </div>
    <div class="div1" style="display:none;">22222
    </div>
    <div class="div1" style="display:none;">33333
    </div>
    </body>
    </html>这是源代码
      

  5.   

    现在点击按钮2 ，div【1】可以显示，但是div【0】和div【2】不能隐藏
      

  6.   


    window.onload=function (){
        var aBtn=document.getElementsByTagName('input');
        var oDiv=document.getElementsByClassName('div1');    
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index = i;
            //下面要注意
            aBtn[i].onclick=(function(_i){
                return function (){
    //调用hideAll
    hideAll();
                    oDiv[_i].style.display='block';
                }
            })(i);
        };
    };
    //隐藏所有
    function hideAll(){
        var oDiv=document.getElementsByClassName('div1');
    for(var i = 0 ; i < oDiv.length ; ++i){
    oDiv[i].style.display='none';
    }
    }
      

  7.   

    嗯 可以了。
    我还想问下
     aBtn[i].onclick=(function(_i){
                return function (){
                    oDiv[_i].style.display='block';
                }
            })(i);
    为什么不能写成这样啊
     
    aBtn[i].onclick=function(){
            oDiv[_i].style.display='block';
        }
      

  8.   

    window.onload=function ()
    {
        var aBtn=document.getElementsByTagName('input');
        var oDiv=document.getElementsByClassName('div1');
        var i;
        for(i=0;i<aBtn.length;i++)
        {
            aBtn[i].index = i;
            //下面要注意
             
            aBtn[i].onclick=(function(_i){
                return function (){
    for(var j=0; j<oDiv.length;++j){
    oDiv[j].style.display='none';
    }

                    oDiv[_i].style.display='block';
                }
            })(i);
        };
    };
      

  9.   

     
    aBtn[i].onclick=function(){
            oDiv[i].style.display='block';
        }写成这样？
      

  10.   

    <script>activeButton=0;window.onload=function ()
    {
        var aBtn=document.getElementsByTagName('input');
        var oDiv=document.getElementsByClassName('div1');
        var i;
        for(i=0;i<aBtn.length;i++)
        {
            aBtn[i].index = i;
            //下面要注意
             
            aBtn[i].onclick=(function(_i){
                return function (){
    oDiv[activeButton].style.display='none';
                    oDiv[_i].style.display='block';
    activeButton = _i;
                }
            })(i);
        };
    };
    </script> 貌似这个更好？
      

  11.   

    那是闭包的作用。
    如果你写成：aBtn[i].onclick=function(){
            oDiv[i].style.display='block';
        }
    你会发现，不管点击哪个都只有最后一个显示，换句话就是上面的代码都会变成：
    aBtn[i].onclick=function(){
            oDiv[aBtn.length-1].style.display='block';
        }
    i不会起作用了。
      

  12.   

    我感觉有点搞复杂了。
    其实完全可以这么搞，代码简单自己看看吧:window.onload = function () {
        var aBtn = document.getElementsByTagName('input');
        var oDiv = document.getElementsByClassName('div1');
        var i;
        for (i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;        aBtn[i].onclick = (function () {
                for(var j = 0; j < oDiv.length; j++){
                    oDiv[j].style.display = 'none';
                }
                oDiv[this.index].style.display = 'block';
            });
        }
    };