有N个button 也就是说button的个数不定,
当点击一个button时,此button的样式变为突出或改变背景色
其他的样式还原为初始样式。

解决方案 »

  1.   

    js来处理<input type=button id="d1" onclick="changecolor(this.id);">
    <input type=button id="d2" onclick="changecolor(this.id);">
    <input type=button id="d3" onclick="changecolor(this.id);">
    <input type=button id="d4" onclick="changecolor(this.id);">
    <input type=button id="dn" onclick="changecolor(this.id);">
    function changecolor(id)
    {
    var bs=document.getElementbytag("input");
    for(i=0;i<bs.length;i++)
    {
    if(bs[i].type="button")
    {
    if(bs[i].id==id)
    //这个是你当前处理的.
    bs[i].style.xxxx=xxxx;
    else
    {
    bs[i].style.xxxx=默认的;
    }}
    }
    }
      

  2.   

    document.getElementsByTagName("input")
      

  3.   


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="testjavascript.WebForm1" %><!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></title>
    <style type="text/css">
    .buttonBorder{ border:1px solid red;}
    </style></head>
    <body>
    <form id="form1" runat="server">
    <input type="button"  value="button1" onclick="changeColor(this)"/>
    <input type="button"  value="button2" onclick="changeColor(this)"/>
    <input type="button"  value="button3" onclick="changeColor(this)"/>
    <input type="button"  value="button4" onclick="changeColor(this)"/>
    <input type="button"  value="button5" onclick="changeColor(this)"/>
    </form><script type="text/javascript">function changeColor(obj)
    {
        var inputs=document.getElementById("form1").getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++)
    {
    if(inputs[i].type=="button")
    {
    inputs[i].style.borderColor="";
    }
    }
        obj.style.borderColor="red";
    }</script>
    </body></html>