作者 乔爽

update function

正在显示 1 个修改的文件 包含 65 行增加54 行删除
... ... @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<title>登录</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
... ... @@ -52,74 +52,85 @@
</div>
<!--登录输入框-->
<div class="bottom" style="display: none">
<div class="bottom_item">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
</div>
<div class="bottom_item">
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<!--登录框-->
<div class="bottom_sub">
立即登录
</div>
<div class="bottom_box">
<!--登录输入框-->
<div class="bottom" style="display: flex">
<div class="bottom_item">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
</div>
<div class="bottom_item">
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<!--记住密码 立即注册-->
<div class="bottom_t">
<div class="bottom_t_item">
<input type="checkbox"> <span>记住密码</span>
<!--登录框-->
<div class="bottom_sub">
立即登录
</div>
<div class="bottom_t_item">
<div>忘记密码?立即注册</div>
<!--记住密码 立即注册-->
<div class="bottom_t">
<div class="bottom_t_item">
<input type="checkbox"> <span>记住密码</span>
</div>
<div class="bottom_t_item">
<div>忘记密码?立即注册</div>
</div>
</div>
</div>
</div>
<!--注册输入框-->
<div class="bottom" style="display: flex">
<div class="bottom_item ">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
</div>
<!--输入验证码-->
<div class="bottom_small margin_item">
<!--验证码输入框-->
<div class="bottom_small_left">
<div class="iconfont icon-yanzhengma"></div>
<input type="text" placeholder="输入验证码">
<!--注册输入框-->
<div class="bottom" style="display: none">
<div class="bottom_item ">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
</div>
<!--获取验证码框-->
<div class="bottom_small_right">
获取验证码
<!--输入验证码-->
<div class="bottom_small margin_item">
<!--验证码输入框-->
<div class="bottom_small_left">
<div class="iconfont icon-yanzhengma"></div>
<input type="text" placeholder="输入验证码">
</div>
<!--获取验证码框-->
<div class="bottom_small_right">
获取验证码
</div>
</div>
</div>
<div class="bottom_item margin_item">
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<div class="bottom_item margin_item">
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<!--登录框-->
<div class="bottom_sub margin_item">
立即注册
</div>
<!--登录框-->
<div class="bottom_sub margin_item">
立即注册
</div>
<!--记住密码 立即注册-->
<div class="bottom_text">
已有账号,立即登录
<!--记住密码 立即注册-->
<div class="bottom_text">
已有账号,立即登录
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
//颜色切换
$(".mid_item").click(function () {
var index = $(this).index()
$(this).addClass("item_color").siblings(".mid_item").removeClass("item_color")
// 内容切换
$(".mid_item").eq($(".bottom_box>.bottom").index()).addClass("on").siblings().removeClass("on")
$(".bottom_box>.bottom").css("display","none").eq($(this).index()).css("display","flex");
})
</script>
</body>
</html>
... ...