一:区域切换的效果图以及思路
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