十万火急:怎样实现三个button按纽或者图片的凹凸效果!(在线等)

代码如下:<input type="button" id="b1" value="Next" onclick=goNext() />
<input type="button" id="b2" value="Pre" onclick=goPre() />
<input type="button" id="b3" value="Last" onclick=goLast() />现在我要求让单击其中的任意一个按纽之后该按钮会凹下去,而另外两个按纽会凸出来的显示效果,请问各位CSS/JS专家余下的代码该如何实现呢?谢谢!!!

解决方案 »

  1.   

    这只是一个onmouseover触发背景更换的效果而矣,选两张不同的图片交换显示就行
      

  2.   

    看看是不是这种效果？
    <html>
    <head>
    <title>HTML表示</title>
    <style>
    .ao
    {
    color:#ff0000;
    background-color:#000000;
    }
    .tu
    {
    color:#0000ff;
    background-color:#ffffff;
    }
    </style>
    </head>
    <body >
    <input type="button" class="ao" name="b1" value="Next" onclick="Change(this,'b2','b3')" />
    <input type="button" class="tu" name="b2" value="Pre" onclick="Change(this,'b1','b3')" />
    <input type="button" class="tu" name="b3" value="Last" onclick="Change(this,'b2','b1')" />
    </body></html>
    <script>
    function Change()
    {
    var nowElement = arguments[0];
    if(nowElement.className != 'ao')
    {
    nowElement.className = 'ao';
    for(var j = 1; j < arguments.length; j++)
    {
    document.getElementById(arguments[j]).className = 'tu';
    }
    }
    }
    </script>
    可以自己修改css就可以了