多个按钮 点击使其中一个突出显示

可以用JavaScript来控制其属性!

解决方案 »

  1.   

    <INPUT ID="A"  VALUE="AAAA"  onClick="setcolor('A','B','C');"> 
    <INPUT ID="B"  VALUE="BBBB" onClick="setcolor('A','B','C');"> 
    <INPUT ID="C"  VALUE="CCCC" onClick="setcolor('A','B','C');"> function djCbg(obj, objColor)
    {
    obj.style.backgroundColor=objColor;
    }
    function setcolor(m,n,k){
    var mm=k;nn=n;kk=k;
    djCbg(mm,'#FFCC00');djCbg(nn,'#FFFFFF');djCbg(kk,'#OOOOOO');
    }
    这种写法为什么不正确?
     
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script >
        function changeCSS()
        {
            if(document.getElementById("A").focus())
            {
                document.getElementById("A").style.color = "red";
            }
            
            
        }
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <INPUT ID="A" type=button  VALUE="AAAA" onclick="changeCSS();">
        <INPUT ID="B" type=button VALUE="BBBB">
        <INPUT ID="C" type=button VALUE="CCCC"> 
        
        
        </form>
    </body>
    </html>
      

  3.   

    function djCbg(obj, objColor)
    {
    obj.style.backgroundColor=objColor;
    }
    function setcolor(m,n,k){
    var mm=k;nn=n;kk=k;
    djCbg(mm,'#FFCC00');djCbg(nn,'#FFFFFF');djCbg(kk,'#OOOOOO');
    }
    <INPUT type="button" ID="A"  VALUE="AAAA"  onClick="setcolor('A','B','C');"> 
    <INPUT type="button" ID="B"  VALUE="BBBB" onClick="setcolor('A','B','C');"> 
    <INPUT type="button" ID="C"  VALUE="CCCC" onClick="setcolor('A','B','C');"> 
    还是不行
      

  4.   

    <input id='btn1' type='button' onclick='test()' title=23 value='保存' /> 如何在test()这段脚本获得"btn1"
      

  5.   

    回复6#:
    1)
    #OOOOOO错了
    应为
    #000000
    (数字0,不是字母O)
    2)
    setcolor('A','B','C')
    单引号不要(IE6)
    建议<script language="javascript">
    <!--
    function djCbg(id, objColor){
    document.getElementById(id).style.backgroundColor=objColor;
    }
    function setcolor(m,n,k){
    var mm=k;nn=n;kk=k;
    djCbg(mm,'#FFCC00');djCbg(nn,'#FFFFFF');djCbg(kk,'#000000');
    }
    //-->
    </script><INPUT type="button" ID="A"  VALUE="AAAA" onClick="setcolor('A','B','C');"> 
    <INPUT type="button" ID="B"  VALUE="BBBB" onClick="setcolor('A','B','C');"> 
    <INPUT type="button" ID="C"  VALUE="CCCC" onClick="setcolor('A','B','C');"> 
      

  6.   

    回复8#: <script language="javascript">
    <!--
    function test(obj){
    alert(obj.id)
    }//-->
    </script><input id='btn1' type='button' onclick='test(this)' title=23 value='保存' /> 
      

  7.   

    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>dhtml.changeBgColorForSelectedButton.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csnd.net" />
     </head> <body>
    <input type="button" value="AAA" />
    <input type="button" value="BBB" />
    <input type="button" value="CCC" />
    <input type="button" value="DDD" />
     </body>
     <script type="text/javascript">
     <!--
    function getInputsByTypeName(sType)
    {
    var collInput = document.getElementsByTagName("input");
    var collTarget = new Array(); for (var i=0; i<collInput.length; i++)
    {
    if (collInput[i].type.toLowerCase()==sType.toLowerCase())
    {
    collTarget.push(collInput[i]);
    }
    }
    return collTarget;
    }var selectedBgColor = "yellow";
    var collBtn = getInputsByTypeName("button");
    for (var i=0; i<collBtn.length; i++)
    {
    collBtn[i].onclick = function(){
    for (var j=0; j<collBtn.length; j++)
    {
    collBtn[j].style.backgroundColor = "";
    }
    this.style.backgroundColor = selectedBgColor;
    };
    }//alert(collBtn); //-->
     </script>
    </html>
      

  8.   

     <script language="javascript"> 
    <!-- 
    function test(obj){ 
    //alert(obj.id) 
    var md=obj.id;
     if(document.getElementById(md).focus())
       {
       document.getElementById(md).style.color = "red";   
       }
    else
    {
     document.getElementById(md).style.color = "blue";   }
    } //--> 
    </script> <input id='btn1' type='button' onclick='test(this)' title=23 value='保存1' /> <input id='btn2' type='button' onclick='test(this)' title=23 value='保存2' /> 这个有问题 
      

  9.   

    <script language="javascript">
    <!--
    onload=function(){
    var obj=document.getElementById("test")
    resetcolor(obj)
    var objINPUT=obj.getElementsByTagName("input"),j=objINPUT.length
    for (var i=0;i<j-1;i++)
    objINPUT[i].onfocus=function(){
    resetcolor(obj)
    this.style.backgroundColor="#ffd"
    } 
    }
    function resetcolor(_obj){
    var obj=_obj.getElementsByTagName("input"),j=obj.length
    for (var i=0;i<j-1;i++)obj[i].style.backgroundColor="#ddf"
    }
    //-->
    </script>
    <div id=test>
    <input ID="A" type="button" VALUE="AAAA"> 
    <input ID="B" type="button" VALUE="BBBB"> 
    <input ID="C" type="button" VALUE="CCCC"> 
    <input id='btn1' type='button'  title=23 value='保存' />
    </div>
      

  10.   

    感谢您,如果页面有两组或多组按纽,每组按钮有多个,可以同时选择两组按钮中的一个如  按类别排序
    <input class="a"  type="button" value="AAA类" />
    <input class="a"  type="button" value="BBB类" />
    <input class="a"  type="button" value="CCC类" />
    <input class="a"  type="button" value="DDD类" />按新品/热卖排序
    <input class="b"  type="button" value="新品" />
    <input class="b" type="button" value="热卖" />怎么改下程序呢?
      

  11.   

    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>dhtml.changeBgColorForSelectedButton.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csnd.net" />
     </head> <body>
    按类别排序
    <input class="a" type="button" value="AAA类" />
    <input class="a" type="button" value="BBB类" />
    <input class="a" type="button" value="CCC类" />
    <input class="a" type="button" value="DDD类" />
    <br />
    按新品/热卖排序
    <input class="b" type="button" value="新品" />
    <input class="b" type="button" value="热卖" />
     </body>
     <script type="text/javascript">
     <!--
    function getInputsByTypeName(sType)
    {
    var collInput = document.getElementsByTagName("input");
    var collTarget = new Array(); for (var i=0; i<collInput.length; i++)
    {
    if (collInput[i].type.toLowerCase()==sType.toLowerCase())
    {
    collTarget.push(collInput[i]);
    }
    }
    return collTarget;
    }function getElementByClassName(collection, sClassName)
    {
    var collTarget = new Array(); for (var i=0; i<collection.length; i++)
    {
    if (collection[i].className.toLowerCase()==sClassName.toLowerCase())
    {
    collTarget.push(collection[i]);
    }
    }
    return collTarget;
    }function setButtonClickAction(collBtn)
    {
    var selectedBgColor = "yellow"; for (var i=0; i<collBtn.length; i++)
    {
    collBtn[i].onclick = function(){
    for (var j=0; j<collBtn.length; j++)
    {
    collBtn[j].style.backgroundColor = "";
    }
    this.style.backgroundColor = selectedBgColor;
    };
    }
    }var collBtn = getInputsByTypeName("button");
    var collBtnA = getElementByClassName(collBtn, "a");
    var collBtnB = getElementByClassName(collBtn, "b");setButtonClickAction(collBtnA);
    setButtonClickAction(collBtnB);
     //-->
     </script>
    </html>
      

  12.   


    <script language="javascript">
    <!--
    onload=function(){
    init("test")
    init("test2")
    }
    function init(id){
        var obj=document.getElementById(id)
        resetcolor(obj)
        var objINPUT=obj.getElementsByTagName("input"),j=objINPUT.length
        for (var i=0;i<j;i++)
        objINPUT[i].onfocus=function(){
            resetcolor(obj)
            this.style.backgroundColor="#ffd"
        } 
    }
    function resetcolor(_obj){
        var obj=_obj.getElementsByTagName("input"),j=obj.length
        for (var i=0;i<j;i++)obj[i].style.backgroundColor="#ddf"
    }
    //-->
    </script>
    <div id=test>
    <h3>按类别排序</h3> 
    <input class="a"  type="button" value="AAA类" /> 
    <input class="a"  type="button" value="BBB类" /> 
    <input class="a"  type="button" value="CCC类" /> 
    <input class="a"  type="button" value="DDD类" /> 
    </div><div id=test2>
    <h3>按新品/热卖排序</h3> 
    <input class="b"  type="button" value="新品" /> 
    <input class="b" type="button" value="热卖" /> 
    </div>