按纽点击事件

网页中有三个图片按纽  当点击其中任何一个时，此按纽变灰  另外两个是正常状态`````
这样的效果改怎么写

解决方案 »

  1.   

    L@_@K
    <!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>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <div id="divContainer">
            <input type="button" id="btn1" style="background-color: red" value="Btn01" />
            <input type="button" id="btn2" style="background-color: white" value="Btn02" />
            <input type="button" id="btn2"  style="background-color: yellow" value="Btn03" />
        </div>
    <script type="text/javascript">
    <!--
    var oDiv = document.getElementById("divContainer");
    var cInputs = oDiv.getElementsByTagName("input");
    var cBtns = new Array();
    for (var i=0; i<cInputs.length; i++)
    {
        if (cInputs[i].type=="button")
        {
            cBtns[cBtns.length] = cInputs[i];
        }
    }
    for (var i=0; i<cBtns.length; i++)
    {
        cBtns[i].onclick = function()
        {
            for (var j=0; j<cBtns.length; j++)
            {
                cBtns[j].disabled = false;
            }
            this.disabled = true;
        };
    }
    //-->
    </script>
    </body>
    </html>
      

  2.   

    <html>
    <head>   
       
    </head>
    <body>
            <input type="button"  value="b1"/>
            <input type="button" value="b2" />
            <input type="button" value="b3" />
    <script type="text/javascript">
    document.onclick=Click;
    var bs;
    window.onload=function()
    {
      bs=document.getElementsByTagName("input");
    }
    function Click(e)
    {
      e=e||event;
      var b=e.srcElement||e.target;
      if(!b.type||b.type!="button")
        return;  
      for(var i=0;i<bs.length;i++)
      {
        if(bs[i].type=="button")
        { 
           if(bs[i]==b)
           {
              b.disabled=true;
           } 
           else
           {
              bs[i].disabled=false;
           }
        }
      }
    }
    </script>
    </body>
    </html>
      

  3.   

    http://blog.doyoe.com/article.asp?id=111
    演示
    http://www.doyoe.com/model/xhtmlcss/style/larger/larger.htm
      

  4.   

    简单来说,就是循环查找网页的<input>元素,找到所有的button并存放在同一个数组,点击一个按钮时先循环把全部按钮设为不可用,最后再把点击的按钮设为可用
      

  5.   

    <html>
    <head>   
       
    </head>
    <body>
            <input type="button"  value="b1" disabled="true"/>
            <input type="button" value="b2" />
            <input type="button" value="b3" />
    <script type="text/javascript">
    document.onclick=Click;
    var bs;
    window.onload=function()
    {
      bs=document.getElementsByTagName("input");
    }
    function Click(e)
    {
      e=e||event;
      var b=e.srcElement||e.target;
      if(!b.type||b.type!="button")
        return;  
      for(var i=0;i<bs.length;i++)
      {
        if(bs[i].type=="button")
        { 
           if(bs[i]==b)
           {
              b.disabled=true;
           } 
           else
           {
              bs[i].disabled=false;
           }
        }
      }
    }
    </script>
    </body>
    </html>