01-二维码和短信密码登录的切换实现

bdog

已于 2022-04-17 11:45:08 修改

阅读量1.1k

点赞数 2

分类专栏： # 02-注册登录区域文章标签： html css

于 2022-04-17 09:49:06 首次发布

本文链接：https://blog.csdn.net/qq_40200966/article/details/124213185

版权

本文介绍了如何实现二维码和短信密码登录方式的切换效果。通过分析思路，将切换区域视为一个整体，利用HTML和CSS进行布局。点击二维码区域时，会显示电脑图标，同时隐藏短信登录区域，展示电脑登录部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：区域切换的效果图以及思路

1. 最终的效果展示：

在这里插入图片描述

2. 分析实现的思路

当我们在点击1区域的二维码时，该区域的二维码会变成电脑，同时显示的区域会发生改变
这样就实现了点击某个区域，实现页面的相互切换

3. 实现的方式

首先需要将切换的区域包裹起来，看作一个整体，也就是图片中的 1 区域和 2 区域作为一个整体，放在一个ul中，每一个区域就相当于一个li
当我点击 1 区域时，短信登录区域和二维码消失，同时把电脑区域和二维码展示出来

4.整体的html代码展示：

<div id="container">
	<!-- 
		通过该区域的li，去切换显示的是什么区域
		1. 如果显示的是第一个li的话，表示的是当前图片显示的短信密码登录图片也就意味着此时点击这个图片页面跳转到短信密码登录区域
	 -->
	<ul class="tab-mes-qrcode">
		<!-- 显示mes-img图片时，表示下方展示的扫码登录区域，此时短信、密码登录区域隐藏 -->
		<li class="hidden">
			<!-- <div class="tip">短信密码登录、注册</div> -->
			<a href="" class="mes-img"></a>
		</li>
		<li class="">
			<!-- <span class="tip">扫码登录</span> -->
			<a