div模拟按纽效果，利用JS控制状态效果，遇到问题，在线请解。。

用一个临时变量
当有onclick事件的时候，根据临时变量找到上个div，恢复他的状态；
再把当前div的id赋给此变量

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

document.getElementByid()这个不行嘛?
var preobj ="EIWONF";
function stateChange()
{
if (typeof(preobj)=="object")
preobj.className = "buttonOut";
window.event.srcElement.className = "buttonPressed";
preobj = window.event.srcElement;
}
加上这段代码以后就成功了，谢谢！！
<!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">

</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>
lz好懒哎
改了你的buttonPressed这个就可以啦，利用你的pressBtnID
function buttonPressed()
{
if(pressBtnID!="LMURHQE")    //其实就加了这一句
{
       document.getElementById(pressBtnID).className ="buttonOut";
}
pressBtnID = window.event.srcElement.id;
if (pressBtnID == lastBtnID)
{
return;
}    //if (document.all.tags('div').id.indexOf("buttonGroup") == 0 )
//stateChange();   //不用你的遍历div了
}
还是有问题，我的目的是只有当鼠标点中时状态才会变化，可是现在当点中鼠标以后，再将鼠标移动到这个DIV上面时，它的状态是变的，做的我都有点晕了。。请高手帮忙，，，谢谢！！
只有当onclick事件发生时，状态才会变化，其它事件状态不会变化，现在还是没有实现，尽量写出详细的代码。，现在搞得我有点发晕了，。。多谢。。
<!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">

</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>
没明白，我也要晕了
用我刚才给的代码，情况是：
点击后，此div变色，只有再次点击的时候才恢复。
其他的div，鼠标移动时，会变色和恢复。
符合吧?
<script language="javascript" type="text/javascript">

</script>