webfront / zhenwei · 提交

转到一个项目

作者 乔爽
提交 959d3bdd81b33859eabcbafc319b3c4c7cad302b 1 个父辈 4eeadbb2

update function

内嵌 并排对比
正在显示 1 个修改的文件 包含 65 行增加 和 54 行删除
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>首页</title> 5 + <title>登录</title>
6 <!--<meta name="viewport" content="width=device-width, initial-scale=1" />--> 6 <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
7 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 7 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -52,74 +52,85 @@ @@ -52,74 +52,85 @@
52 52
53 </div> 53 </div>
54 54
55 - <!--登录输入框-->  
56 - <div class="bottom" style="display: none">  
57 - <div class="bottom_item">  
58 - <div class="iconfont icon-Fill"></div>  
59 - <input type="text" placeholder="请输入手机号">  
60 - </div>  
61 - <div class="bottom_item">  
62 - <div class="iconfont icon-mima"></div>  
63 - <input type="text" placeholder="请输入密码">  
64 - </div>  
65 -  
66 - <!--登录框-->  
67 - <div class="bottom_sub">  
68 - 立即登录  
69 - </div> 55 + <div class="bottom_box">
  56 + <!--登录输入框-->
  57 + <div class="bottom" style="display: flex">
  58 + <div class="bottom_item">
  59 + <div class="iconfont icon-Fill"></div>
  60 + <input type="text" placeholder="请输入手机号">
  61 + </div>
  62 + <div class="bottom_item">
  63 + <div class="iconfont icon-mima"></div>
  64 + <input type="text" placeholder="请输入密码">
  65 + </div>
70 66
71 - <!--记住密码 立即注册-->  
72 - <div class="bottom_t">  
73 - <div class="bottom_t_item">  
74 - <input type="checkbox"> <span>记住密码</span> 67 + <!--登录框-->
  68 + <div class="bottom_sub">
  69 + 立即登录
75 </div> 70 </div>
76 - <div class="bottom_t_item">  
77 - <div>忘记密码？立即注册</div> 71 +
  72 + <!--记住密码 立即注册-->
  73 + <div class="bottom_t">
  74 + <div class="bottom_t_item">
  75 + <input type="checkbox"> <span>记住密码</span>
  76 + </div>
  77 + <div class="bottom_t_item">
  78 + <div>忘记密码？立即注册</div>
  79 + </div>
78 </div> 80 </div>
79 </div> 81 </div>
80 - </div>  
81 82
82 - <!--注册输入框-->  
83 - <div class="bottom" style="display: flex">  
84 - <div class="bottom_item ">  
85 - <div class="iconfont icon-Fill"></div>  
86 - <input type="text" placeholder="请输入手机号">  
87 - </div>  
88 - <!--输入验证码-->  
89 - <div class="bottom_small margin_item">  
90 - <!--验证码输入框-->  
91 - <div class="bottom_small_left">  
92 - <div class="iconfont icon-yanzhengma"></div>  
93 - <input type="text" placeholder="输入验证码"> 83 + <!--注册输入框-->
  84 + <div class="bottom" style="display: none">
  85 + <div class="bottom_item ">
  86 + <div class="iconfont icon-Fill"></div>
  87 + <input type="text" placeholder="请输入手机号">
94 </div> 88 </div>
95 - <!--获取验证码框-->  
96 - <div class="bottom_small_right">  
97 - 获取验证码 89 + <!--输入验证码-->
  90 + <div class="bottom_small margin_item">
  91 + <!--验证码输入框-->
  92 + <div class="bottom_small_left">
  93 + <div class="iconfont icon-yanzhengma"></div>
  94 + <input type="text" placeholder="输入验证码">
  95 + </div>
  96 + <!--获取验证码框-->
  97 + <div class="bottom_small_right">
  98 + 获取验证码
  99 + </div>
98 </div> 100 </div>
99 - </div>  
100 101
101 - <div class="bottom_item margin_item">  
102 - <div class="iconfont icon-mima"></div>  
103 - <input type="text" placeholder="请输入密码">  
104 - </div> 102 + <div class="bottom_item margin_item">
  103 + <div class="iconfont icon-mima"></div>
  104 + <input type="text" placeholder="请输入密码">
  105 + </div>
105 106
106 - <!--登录框-->  
107 - <div class="bottom_sub margin_item">  
108 - 立即注册  
109 - </div> 107 + <!--登录框-->
  108 + <div class="bottom_sub margin_item">
  109 + 立即注册
  110 + </div>
110 111
111 - <!--记住密码 立即注册-->  
112 - <div class="bottom_text">  
113 - 已有账号，立即登录 112 + <!--记住密码 立即注册-->
  113 + <div class="bottom_text">
  114 + 已有账号，立即登录
  115 + </div>
114 </div> 116 </div>
115 </div> 117 </div>
116 118
117 119
118 120
119 -  
120 -  
121 </div> 121 </div>
122 -  
123 - 122 +<script src="js/jquery.min.js"></script>
  123 +
  124 +<script>
  125 + //颜色切换
  126 + $(".mid_item").click(function () {
  127 + var index = $(this).index()
  128 + $(this).addClass("item_color").siblings(".mid_item").removeClass("item_color")
  129 + // 内容切换
  130 + $(".mid_item").eq($(".bottom_box>.bottom").index()).addClass("on").siblings().removeClass("on")
  131 + $(".bottom_box>.bottom").css("display","none").eq($(this).index()).css("display","flex");
  132 + })
  133 +
  134 +</script>
124 </body> 135 </body>
125 </html> 136 </html>