<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.sms-type button{
width: 60px;
height: 30px;
margin-right: 10px;
border: #d0d0d0 1px solid;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
outline: none;
cursor: pointer;
}
.sms-type button.on-sel{
border: #ff7e0e 1px solid;
background-color: #fff0c5;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
function replyDetailClick(){
$(".reply-details .sms-type button").click(function(){
$(".reply-details .sms-type button").removeClass("on-sel");
$(this).addClass("on-sel");
})
}
function getButtonId(){
$(".sms-type button").click(function(){
var buttonId = $(this).attr("id");
alert("buttonId："+buttonId);
});
} $(document).ready(function() {
replyDetailClick();
getButtonId();
});
</script> </head>
<body>
<div class="reply-details">
<div>
<label class="sms-type">
<button id="all" class="on-sel">全部</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="other">其他</button>
</label>
</div>
</div>
</body>
</html>
全部 1 2 3 其他