按钮转换（京东登录）
2019-02-14 本文已影响0人
憨猜猜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
width: 150px;
height: 40px;
background-color: rgba(0,0,0,0);
font-size: 25px;
border: 0;
}
button:focus{
outline: 0;
}
#btn1{
color: red;
}
#imgbtn2{
display: none;
}
</style>
</head>
<body>
<div id="">
</div>
<button id="btn1">扫码登录</button>
<button id="btn2">账号登录</button>
<div id="">
<img id="imgbtn1" src="img/picture-1.jpg"/>
<img id="imgbtn2" src="img/picture-2.jpg"/>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--添加事件-->
<script type="text/javascript">
//保存当前选中的按钮的id值
var seletedId = 'btn1'
//给按钮添加点击事件
$('body').on('click', 'button', function(){
//点击的就是选中的按钮
if(this.id == seletedId){
return
}
//更新当前的状态
$(this).css('color', 'red')
$('#img'+this.id).css('display', 'block')
//恢复之前选中的按钮的状态
$('#'+seletedId).css('color', 'black')
$('#img'+seletedId).css('display', 'none')
//更新seletedId
seletedId = this.id
})
</script>
</body>
</html>
image.png
