02-短信登录和密码登录的切换

bdog

已于 2022-04-18 12:01:05 修改

阅读量1k

点赞数

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

于 2022-04-17 13:47:30 首次发布

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

版权

本文介绍了如何实现网页上短信登录和密码登录之间的切换效果。通过将两者置于同一位置的ul元素中，并通过切换selected类来控制显示与隐藏，从而达到切换显示的目的。

摘要由CSDN通过智能技术生成

短信登录和密码登录的切换效果实现思路

1. 最终的实现效果

在这里插入图片描述

2. 分析实现的思路：

首先把短信登录和密码登录区域书写在统一位置
这里的短信登录和密码登录放在一个ul中，通过去修改其是否具有类名为selected，来去选中该元素是否显示的区域，
如果是选中的区域，就把下方区域显示出来，另一个区域隐藏起来

3. 代码实现展示

<!-- 短信、密码登录区域 -->
<div class="mes-container ">
	<!-- 这个ul主区域就是用于切换信息和密码，进而展示所想的区域 -->
	<ul class="tab-mes-pwd">
		<!-- 当该li具有selected类名时，表示下方要展示的div就是该区域 -->
		<li class="selected">短信登录/注册</li