div+css+js实现按钮效果，遇到棘手问题，请高手帮忙。在线等，给分。。。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<style type="text/css">
#buttonOut
{
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
width: 100px;
height: 20px;
border: 1px #000000 solid;
background-color: #EBE9ED;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
vertical-align: middle;
cursor: auto;
}
.buttonOut {
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
width: 100px;
height: 20px;
border: 1px #000000 solid;
background-color: #EBE9ED;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
vertical-align: middle;
cursor: auto;
}.buttonOver {
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
width: 100px;
height: 20px;
border: 1px #000000 solid;
background-color: #335EA8;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
cursor: default;
}.buttonPressed {
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
width: 100px;
height: 20px;
border: 1px #000000 solid;
background-color: #9DACBF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #5C5C5C;
text-align: center;
vertical-align: middle;
cursor: default;
}
</style><script language="javascript" type="text/javascript">
<!--
var curtBtnID = "EWDIDOW";
var lastBtnID = "DOWPQKF";
var pressBtnID = "LMURHQE";
var preObj ="id1";
function buttonOut()
{
lastBtnID = window.event.srcElement.id;
if (pressBtnID != curtBtnID && curtBtnID == window.event.srcElement.id)
{
window.event.srcElement.className = "buttonOut";
}

}function buttonOver()
{
curtBtnID = window.event.srcElement.id;
if ( curtBtnID == preObj)
return;
if (pressBtnID == lastBtnID && curtBtnID == lastBtnID)
{
return;
}
window.event.srcElement.className = "buttonOver";
}function buttonPressed()
{
pressBtnID = window.event.srcElement.id;
if (pressBtnID == lastBtnID)
{
return;
}
stateChange();
}function stateChange()
{
/*
for(i=0;i<document.all.tags('div').length;i++)
{
if (document.all.tags('div')[i].id.indexOf('id') == 0)
{
document.all(document.all.tags("div")[i].id).className = "buttonOut";
}
}
window.event.srcElement.className = "buttonPressed";
*/
    if (typeof(document.getElementById(preObj)) == "object" )
document.getElementById(preObj).className = "buttonOut";
window.event.srcElement.className = "buttonPressed";
preObj = window.event.srcElement.id;
}
//-->
</script>
</head><body>
<div id="buttonGroup">
<div id="id1" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button Yes</div>
<div id="id2" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button No</div>
<div id="id3" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button No2</div>
</div>
<div></div>

解决方案 »

  1.   

    修改部分:
    function buttonOut()
    {
    lastBtnID = window.event.srcElement.id;
    if (pressBtnID != curtBtnID && curtBtnID == window.event.srcElement.id)
    {
    window.event.srcElement.className = "buttonOut";
    }
             //添加如果离开按下按钮,按钮恢复按下样式
    if(pressBtnID==curtBtnID){
    window.event.srcElement.className = "buttonPressed";
    }
    }
      

  2.   

    以上两位的代码都　有问题，还是不能实现只有当onclick时才会变化状态的效果，
      

  3.   

    不太明白你的意思,只有onclick时才会变化状态的效果?
    是不是鼠标按下时变为按下样式,鼠标松开时恢复...
      

  4.   

    是不是这个效果,看看
    <%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*"  errorPage="" %>
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试</title>
    <style type="text/css">
    #buttonOut
    {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #EBE9ED;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: auto;
    }
    .buttonOut {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #EBE9ED;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: auto;
    }.buttonOver {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #335EA8;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    }.buttonPressed {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #9DACBF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #5C5C5C;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    }
    </style><script language="javascript" type="text/javascript">
    <!--
    var curtBtnID = "EWDIDOW";
    var lastBtnID = "DOWPQKF";
    var pressBtnID = "LMURHQE";
    var preObj ="EIWONF";
    function buttonOut()
    {
    lastBtnID = window.event.srcElement.id;
    //if (pressBtnID != curtBtnID && curtBtnID == window.event.srcElement.id)
    //{
    window.event.srcElement.className = "buttonOut";
    //}
    //if(pressBtnID==curtBtnID){
    //window.event.srcElement.className = "buttonPressed";
    //}
    }function buttonOver()
    {
    curtBtnID = window.event.srcElement.id;
    if (pressBtnID == lastBtnID && curtBtnID == lastBtnID)
    {
    return;
    }
    window.event.srcElement.className = "buttonOver";
    }function buttonPressed()
    {
    pressBtnID = window.event.srcElement.id;
    //if (pressBtnID == lastBtnID)
    //{
    //return;
    //}
    stateChange();
    }function stateChange()
    {
    /*
    for(i=0;i<document.all.tags('div').length;i++)
    {
    if (document.all.tags('div')[i].id.indexOf('id') == 0)
    {
    document.all(document.all.tags("div")[i].id).className = "buttonOut";
    }
    }
    window.event.srcElement.className = "buttonPressed";
    */
        if (typeof(preObj) == "object" )
    preObj.className = "buttonOut";
    window.event.srcElement.className = "buttonPressed";
    preObj = window.event.srcElement;
    }
    //-->
    </script>
    </head><body>
    <div id="buttonGroup">
    <div id="id1" class="buttonOut" onmousedown="buttonPressed();" onmouseup="buttonOut();">Button Yes</div>
    <div id="id2" class="buttonOut" onmousedown="buttonPressed();" onmouseup="buttonOut();">Button No</div>
    <div id="id3" class="buttonOut" onmousedown="buttonPressed();" onmouseup="buttonOut();">Button No2</div>
    </div>
    <div></div>
    </body>
      

  5.   

    也不是楼上所说的那种状态，　就是有三种状态，onmouseout,onmouseover,onclick,在这三种状态中，当你是onclick状态时，你移动鼠标也是这种状态不在变化，只有你再次点中别的按钮时这种状态才会变化到onmouseout状态，其它的事件不会改变这种状态。
      

  6.   

    是不是这种,再看看:
    <%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*"  errorPage="" %>
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试</title>
    <style type="text/css">
    #buttonOut
    {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #EBE9ED;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: auto;
    }
    .buttonOut {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #EBE9ED;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    vertical-align: middle;
    cursor: auto;
    }.buttonOver {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #335EA8;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    }.buttonPressed {
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    width: 100px;
    height: 20px;
    border: 1px #000000 solid;
    background-color: #9DACBF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #5C5C5C;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    }
    </style><script language="javascript" type="text/javascript">
    <!--
    var curtBtnID = "EWDIDOW";
    var lastBtnID = "DOWPQKF";
    var pressBtnID = "LMURHQE";
    var preObj ="EIWONF";
    function buttonOut()
    {
    lastBtnID = window.event.srcElement.id;
    if (pressBtnID != curtBtnID && curtBtnID == window.event.srcElement.id)
    {
    window.event.srcElement.className = "buttonOut";
    }
    if(pressBtnID==curtBtnID){
    window.event.srcElement.className = "buttonPressed";
    }
    }function buttonOver()
    {
    curtBtnID = window.event.srcElement.id;
    if (pressBtnID == lastBtnID && curtBtnID == lastBtnID)
    {
    return;
    }
    window.event.srcElement.className = "buttonOver"; if(pressBtnID==curtBtnID){
    window.event.srcElement.className = "buttonPressed";
    }
    }function buttonPressed()
    {
    pressBtnID = window.event.srcElement.id;
    if (pressBtnID == lastBtnID)
    {
    return;
    }
    stateChange();
    }function stateChange()
    {
    /*
    for(i=0;i<document.all.tags('div').length;i++)
    {
    if (document.all.tags('div')[i].id.indexOf('id') == 0)
    {
    document.all(document.all.tags("div")[i].id).className = "buttonOut";
    }
    }
    window.event.srcElement.className = "buttonPressed";
    */
        if (typeof(preObj) == "object" )
    preObj.className = "buttonOut";
    window.event.srcElement.className = "buttonPressed";
    preObj = window.event.srcElement;
    }
    //-->
    </script>
    </head><body>
    <div id="buttonGroup">
    <div id="id1" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button Yes</div>
    <div id="id2" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button No</div>
    <div id="id3" class="buttonOut" onmouseout="buttonOut();" onmouseover="buttonOver();" onclick="buttonPressed();">Button No2</div>
    </div>
    <div></div>
    </body>