按钮样式变换，这个按下另一个弹起

Question

<div id="mainMenus" class="topmenu">
  <div class="current" name="index">
  <span><a href="#">首页</a></span></div>
  <div class="greenbutton" name="goods">
  <span><a href="#">商品</a></span></div>
  <div class="greenbutton" name="order">
  <span><a href="#">订单</a></span></div>
  <div class="greenbutton" name="member">
  <span><a href="#">成员</a></span></div>
</div>
class="current"为按钮按下的状态，class="greenbutton"为按钮弹起的状态
要实现按一个class="greenbutton"的按钮，class变为"current",之前的那个按下的变为"greenbutton"
明白我的意思了么

Answer 1

<style>
.current{ background:red;width:100px;height:30px;}
.greenbutton{background:green;width:100px;height:30px;border:1px solid #000}
</style>
<div id="mainMenus" class="topmenu">
  <div class="current" name="index" id="default">
  <span><a href="#">首页</a></span></div>
  <div class="greenbutton" name="goods">
  <span><a href="#">商品</a></span></div>
  <div class="greenbutton" name="order">
  <span><a href="#">订单</a></span></div>
  <div class="greenbutton" name="member">
  <span><a href="#">成员</a></span></div>
</div></body>
<script type="text/javascript">
var m = document.getElementById("mainMenus")
var old =document.getElementById("default");
m.onclick = function(e)
{
   e = e || window.event;
   target = e.target || e.srcElement;
   if(old) old.className = "greenbutton"
   target.className="current"
   old = target
}
</script>