由于项目需求，使用苹果5手机访问的时候，发现了一个坑爹的问题，
如论如何点击“下一步”，都没有任何反应，
可是在安卓和苹果6，7，8各种模拟器中一切正常.
望各位大佬指点。
##@zhumengniao
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link{
text-decoration:none;
}
html,body{
width: 100%;
/* height: 100%; */
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
list-style: none;
list-style-type: none;
background-color: white;
/* overflow: hidden; */
/* position: absolute; */
}
.wrapper{
width: 100%;
/* height: 100%; */
}
.wrapper-nav{
width: 100%;
/* height: 8%; */
line-height: 3rem;
background-color: rgb(255, 255, 255);
text-align: center;
}
.wrapper-nav img{
width: 30%;
margin-top: 5%;
}
.register{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.register-type{
border-bottom: 1px solid #ccc;
margin-left: auto;
margin-right: auto;
}
.register-type a{
width: 49%;
line-height: 4rem;
text-align: center;
font-size: 16px;
display: inline-block;
color: #4d4d4d;
}
.register-phoneNumber{
margin-top: 3%;
}
.register-phoneNumber-box{
width: 100%;
/* height: 4rem; */
/* line-height: 4rem; */
border-radius: 5px;
margin-top: 3%;
border: 1px solid #ccc;
}
.register-phoneNumber-box input{
width: 65%;
font-size: 16px;
height: 2.7rem;
padding: 2%;
border: 0;
outline: 0;
border-radius: 5px;
background-color: transparent;
}
.register-phoneNumber-box a{
font-size: 16px;
color: #00b4ef;
}
.register-button{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20%;
border-radius: 25px;
background-color: #ccc;
}
.register-button a{
font-size: 26px;
color: white;
line-height: 4rem;
}
.otherContacts{
width: 100%;
margin-top: 8%;
text-align: center;
}
.otherContacts span{
margin: 2%;
display: block;
}
.otherContacts a{
width: 10%;
display: inline-block;
margin: 5%;
}
.otherContacts img{
width: 100%;
}
.otherContacts p{
font-size: 12px;
text-align: center;
margin-top: 6%;
}
</style>
<title>登录</title>
</head>
<body>
<div class="wrapper">
<!-- 导航栏 -->
<div class="wrapper-nav">
<img src="img/logo.png" alt="">
</div>
<hr>
<!-- 登录 -->
<div class="register">
<div class="register-type">
<a id="withoutCodeLogin" class="tab_selected" href="javascript:changeToLogin(1);">免密登录</a>
<a id="withoutCodeRegister" href="javascript:changeToLogin(2);">账号注册</a>
</div>
<div class="register-phoneNumber" id="box-left">
<div class="register-phoneNumber-box">
<input type="text" placeholder="请输入手机号" >
</div>
<div class="register-phoneNumber-box">
<input type="text" placeholder="6位数字验证码">
<a href="">获取验证码</a>
</div>
</div>
<div class="register-phoneNumber" id="box-right" style="display: none;">
<div class="register-phoneNumber-box">
<input type="text" placeholder="手机号/邮箱" >
</div>
<div class="register-phoneNumber-box">
<input type="text" placeholder="6位数字验证码">
<a href="">获取验证码</a>
</div>
</div>
</div>
<!-- 登录button -->
<div class="register-button"><a href="">登录</a></div>
<!-- 其它方式 -->
<div class="otherContacts">
<span>其它方式登录</span>
<hr>
<a href=""><img src="img/douyin.png" alt=""></a>
<a href=""><img src="img/weixin.png" alt=""></a>
</div>
</div>
<script src="https://www.telabytes.com/static/assets/js/jquery-3.1.1.min.js"></script>
<script>
function changeToLogin(num) {
if (num == 1) {
$("#withoutCodeLogin").addClass("tab_selected")
$("#withoutCodeRegister").removeClass("tab_selected")
$("#box-left").css("display", "")
$("#box-right").css("display", "none")
} else {
$("#withoutCodeRegister").addClass("tab_selected")
$("#withoutCodeLogin").removeClass("tab_selected")
$("#box-left").css("display", "none")
$("#box-right").css("display", "")
}
}
</script>
</body>
</html>
