点击按钮实现状态切换效果
分类：实例代码
分享一段代码实例，它实现了点击按钮实现按钮的状态切换。
这里所谓的状态无非就是按钮的背景色或者显示的value属性值等特性。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.antzone {
background: #5bc0de;
margin: 30px;
padding: 20px 30px;
font-size: 14px;
color: #fff;
}
.antzone {
border: 1px solid transparent;
display: inline-block;
border-color: #1b6d85;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var onOff=true;
var odiv = $(".antzone");
odiv.click(function () {
if (odiv.onOff) {
odiv.val("关注我");
odiv.css({
"background": '#5bc0de',
"border-color": '#1b6d85'
});
odiv.onOff = false;
} else {
odiv.css({
"background": 'red',
"border-color": '#000'
});
odiv.val("已关注");
odiv.onOff = true;
}
});
});
</script>
</head>
<body>
<input type="button" value="关注我" class="antzone">
</body>
</html>
点击按钮实现状态切换效果，这样的场景在实际项目中还是用的比较多的，关于点击按钮实现状态切换效果就介绍到这了。
点击按钮实现状态切换效果属于前端实例代码，有关更多实例代码大家可以查看。