新手求助，按钮按下背景颜色改变

眷恋星空 · 发表于：2015-06-11 10:45:21

新手寻帮助，请问点击按钮过后，按钮背景颜色变为绿色，当点击其他按钮时，之前的按钮颜色变回原样，按钮我是用表格布局的，请问怎样实现这个功能呢？我之前用鼠标经过hover来做，也能模仿触摸效果，但是当点击其他空白的地方时候，按钮颜色就变回原来的样子了。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>充值</title>
<link rel="stylesheet" text/css/ href="../css/api.css">
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<style>
      body, html {
         height: 90%;
      }

      body {
         background-repeat: no-repeat;
         background-size: 100%;
      }

      i {
         display: block;
         width: 30px;
         background-size: 30px;
         background-repeat: no-repeat no-repeat;
         background-position: center;
      }
.tel{
background-image: url("../image/home_icon_phone@2x.png");
}

      .input-wrap {
         padding: 10px 0;
         display: -webkit-box;
      }

      .input-wrap:first-child {
         border-bottom: 1px solid #d4d4d4;
      }

      .form {
         background-color: #EEEEEE;
         margin: 40px 40px;
         border-radius: 8px;
         padding: 0 10px;
         line-height: 30px;
      }

      .input-wrap input {
         display: block;
         -webkit-box-flex: 1;
         background-color: rgba(255, 255, 255, 0);
         height: 30px;
      }
      .money{
        width:100%;
        margin-top:20px;

      }
      .td{
height: 60px;

}
.jine{margin-left:40px;margin-top:20px;}
.pay1{
height:30px;
margin-left:40px;

}
.pay2{
float:right;
height:30px;
margin-right: 40px;
}
.pay_bt input{
width:32%;
border-style:solid;
border-width: 1px;
border-radius: 4px;
border-color:#009100;
color:#009100;
}
.pay1:hover{
background-color:#00CD00;
color:#ffffff;
}
.pay2:hover{
background-color:#00CD00;
color:#ffffff;
}
.pay_now{
color:#ffffff;
}
.footer {
         color: #ffffff;
         margin: 0 40px;
         text-align: center;
         border-radius: 5px;
         height: 40px;
         line-height: 40px;
         margin-top:40px;
         background-color: #FF7800;
      }
</style>
</head>
<body>
<div class="content">
<form id="form_pay">
<div class="form">
        <div class="input-wrap">
            <i class="tel"></i>
            <input type="tel" placeholder="手机号码" class="txt" id="telNum" value="" maxlength="11"
            onpropertychange="replaceNotNumber(this)"/>
        </div>
</div>

      <div class="pay_table" form="form_pay">
        <table class="money" >
        <tr>
        <td class="td">
        <div class="pay_bt">
        <input type="button" class="pay1" id="pay_10" value="10元"/>
        <input type="button" class="pay2" id="pay_30" value="30元"/>
        </div>

        </td>
        </tr>
        <tr>
        <td class="td">
        <div class="pay_bt">
        <input type="button" class="pay1" id="pay_50" value="50元"/>
        <input type="button" class="pay2" id="pay_100" value="100元"/>
        </div>

        </td>
        </tr>
        <tr>
        <td class="td">
        <div class="pay_bt">
        <input type="button" class="pay1" id="pay_200" value="200元"/>
        <input type="button" class="pay2" id="pay_300" value="300元"/>
        </div>

        </td>
        </tr>
        <tr>
        <td class="td">
        <div class="pay_bt">
        <input type="button" class="pay1" id="pay_400" value="400元"/>
        <input type="button" class="pay2" id="pay_500" value="500元"/>
        </div>

        </td>
        </tr>
        </table>
      </div>
      <div class="jine">
      <p>充值金额：</p>
      </div>
      <footer class="footer">
      <div>
        <input class="pay_now" form="form_pay" type="submit" id="pay_now"
        value="立即充值" tapmode="yellow-btn-active"/>
      </div>
</footer>
</form>
</div>
</body>
<script src="../script/zepto.min.js"></script>
<script src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aliPay.js"></script>
<script>
apiready = function () {
      fixIos7Bar($("header"));
};
function pay(){
      api.openWin({
         name:"pay",
         url:'pay_choice.html'
      })
}
api.addEventListener({
      name:'onclick'
},function(ret,err){
var pay10 = document.getElementById("pay_10");
var pay30 = document.getElementById("pay_30");
var pay50 = document.getElementById("pay_50");
var pay100 = document.getElementById("pay_100");
var pay200 = document.getElementById("pay_200");
var pay300 = document.getElementById("pay_300");
var pay400 = document.getElementById("pay_400");
var pay500 = document.getElementById("pay_500");
switch(pay){
case pay10:
var pay = 10;
break;
case pay30:
var pay = 30;
break;
case pay50:
var pay = 50;
break;
case pay100:
var pay = 100;
break;
case pay200:
var pay = 200;
break;
case pay300:
var pay = 300;
break;
case pay400:
var pay = 400;
break;
case pay500:
var pay = 500;
break;
}
});

眷恋星空

上面图片我想做的效果，现在这种图片是我模仿的dome

前端咨询-Alon

眷恋星空发表于 2015-6-11 10:46
上面图片我想做的效果，现在这种图片是我模仿的dome

api.addEventListener不能用"onclick"等原生事件，只能用api规定的事件

眷恋星空

前端咨询-Alon 发表于 2015-6-11 11:02
api.addEventListener不能用"onclick"等原生事件，只能用api规定的事件

哦哦，我只是测试一下看能不能使用，对了，如果我选中了某个按钮，如何把按钮的值传递到“充值金额：”那里呢？

前端咨询-Alon

眷恋星空发表于 2015-6-11 11:17
哦哦，我只是测试一下看能不能使用，对了，如果我选中了某个按钮，如何把按钮的值传递到“充值金额：”那 ...

建议学习一下JS基础知识，不然后期开发会举步维艰......

取得点中的那个元素的值，然后赋值给金额那里的元素

眷恋星空

前端咨询-Alon 发表于 2015-6-11 17:02
建议学习一下JS基础知识，不然后期开发会举步维艰......

那按钮按下过后，按钮背景颜色改变，如果再按其他按钮，之前的按钮背景颜色变回原来的样子，这个是怎么实现的呢？

yyyfx

本帖最后由 yyyfx 于 2015-6-11 19:57 编辑

眷恋星空发表于 2015-6-11 17:06
那按钮按下过后，按钮背景颜色改变，如果再按其他按钮，之前的按钮背景颜色变回原来的样子，这个是怎么实 ...

你可以通过设置一个类，如 selected 为选中按钮时的样式。
通过 addClass 和 removeClass 这样的类似方法添加和删除 selected 类，来实现样式的切换。

新手求助，按钮按下背景颜色改变 [复制链接]