摘要：<!DOCTYPE html> <html> <head> <title>小米商城-登錄</title> <meta charset="utf-8"> &l
<!DOCTYPE html>
<html>
<head>
<title>小米商城-登錄</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png" />
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<script src="static/js/jq_3.3.1_mi.js"></script>
</head>
<body>
<div class="header">
<a href="./index.html"><img src="static/images/5.png"></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<!--<p style="color: #ff6700;" id="regTabs_0" onclick=" ChangeReg('0','register_',1)">賬號登錄</p>-->
<!--<span>|</span>-->
<!--<p id="regTabs_1" onclick=" ChangeReg('1','register_',1)">掃碼登錄</p>-->
<p style="color: #ff6700;" id="regTabs_0" >賬號登錄</p>
<span>|</span>
<p id="regTabs_1" >掃碼登錄</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input type="text" name="username" placeholder="郵箱/ 手機號碼/小米ID">
<input type="text" name="password" placeholder="密碼">
<button>登錄</button>
</form>
<h6><a href="" style="color: #ff6700;">手機短信登錄/注冊</a><span><a href="">立即注冊</a> | <a href="">忘記密碼？</a></span></h6>
<div class="login_form_pic">
<p>其他方式登錄</p>
<ul>
<li class="pic1" style="margin-right: 35px;"><i class="fa fa-qq"></i></li>
<li class="pic2" style="margin-right: 35px;"><i class="fa fa-weibo"></i></li>
<li class="pic3" style="margin-right: 35px;"><i class="fa fa-twitter-square"></i></li>
<li class="pic4"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content0" style="display: none;" id="register_1">
<img src="static/images/下載.png">
<p>使用<span style="color: #ff6700;">小米商城APP</span>掃一掃</p>
<p>小米手機可打開「設置」>「小米帳號」掃碼登錄</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">簡體<span>|</span>繁體<span>|</span>English<span>|</span> 常見問題<span>|</span> 隱私政策</p>
<p>小米公司版權所有-京ICP備10046444-<img src="static/images/ghs.png"> 京公網安備11010802020134號-京ICP證110507號</p>
<script type="text/javascript">
// function ChangeReg(divId,divName,Count) {
// for(var i=0;i<=Count;i++){
// document.getElementById(divName+i).style.display='none'
// }
// document.getElementById(divName+divId).style.display='block'
// if(divId==0){
// document.getElementById('regTabs_0').style.color='#ff6a00'
// document.getElementById('regTabs_1').style.color='#757575'
// }
// if(divId==1){
// document.getElementById('regTabs_0').style.color='#757575'
// document.getElementById('regTabs_1').style.color='#ff6a00'
// }
//
// }
$(function () {
$('#regTabs_0').click(function () {
$('#register_0').css('display','block');
$('#register_1').css('display','none');
$(this).css('color','#ff6a00');
$('#regTabs_1').css('color','#757575');
});
$('#regTabs_1').click(function () {
$('#register_0').css('display','none');
$('#register_1').css('display','block');
$(this).css('color','#ff6a00');
$('#regTabs_0').css('color','#757575');
});
});
</script>
</body>
</html>總結
用jquery改寫 切換；
批改老師：天蓬老師批改時間：2019-05-05 15:18:34
老師總結：原生也不錯的, 不一定什么都要用jQuery進行改寫... 除非可以大面積的減少代碼量