实现效果为如下：在同一页面下，当我选中输入手机号时，出现手机号输入框，当我选中输入验证码时，出现验证码输入框，当我选中设置密码时，出现密码框
在这里有一个小技巧，就是 1.对下面的输入框设置同样的样式，保证在更换的时候不出现抖动；2.对输入框区域一开始就设置display：none。让其不显示，在上方单选框checked的时候再显示出来。
html代码如下：
<div class="main1"> ???????????<input type="radio" name="regist" id="regist1" checked> ????????????<！--默认选中--> ???????????<label for="regist1">输入手机号 ???????????????<span>·</span> ???????????????<span>·</span> ???????????????<span>·</span> ???????????</label> ???????????<input type="radio" name="regist" id="regist2"> ???????????<label for="regist2">输入验证码 ???????????????<span>·</span> ???????????????<span>·</span> ???????????????<span>·</span> ???????????</label> ???????????<input type="radio" name="regist" id="regist3"> ???????????<label for="regist3">设置密码 ???????????</label> ???????????<div class="tel"> ???????????????<label for="tel1">手机号：</label> ???????????????<input type="tel" minlength="11" maxlength="11" id="tel1" placeholder="请输入你的手机号"> ???????????</div> ???????????<div class="code"> ???????????????<label for="code1">验证码：</label> ???????????????<input type="text" minlength="6" maxlength="6" id="code1" placeholder="请输入验证码"> ???????????</div> ???????????<div class="pass"> ???????????????<label for="pass1">密码：</label> ???????????????<input type="password" minlength="6" maxlength="16" id="pass1" placeholder="请输入不少于6位数的密码"> ???????????</div> ???????????<a href=""><input type="submit" value="获取验证码"></a> ???????????<a href="../HTML/mine.html"><input type="submit" value="提交"></a> ???????</div>
css代码如下：
/* 一开始设置display值为none */.main1>div{ ???width: 100%; ???height: 1.52rem; ???background-color: white; ???font-size: .46rem; ???align-items: center; ???justify-content: space-around; ???padding-left: .48rem; ???display: none;}/* 设置选中后下的内容 */.main1>input[id="regist1"]:checked~div[class="tel"]{ ???display: flex;}.main1>input[id="regist1"]:checked~a:nth-of-type(1){ ???display:flex;}.main1>input[id="regist2"]:checked~div[class="code"]{ ???display: flex;}.main1>input[id="regist2"]:checked~a:nth-of-type(1){ ???display: flex;}.main1>input[id="regist2"]:checked~a:nth-of-type(1)>input{ ???background-color: rgb(219, 64, 59);}.main1>input[id="regist3"]:checked~div[class="pass"]{ ???display: flex;}.main1>input[id="regist3"]:checked~a:nth-of-type(2){ ???display: flex;}.main1>input[id="regist3"]:checked~a:nth-of-type(2)>input{ ???background-color: rgb(219, 64, 59);}
是不是挺简单的呢？这些小技巧用好了还能实现相当多的效果。。。。
纯css实现同一页面下选择之后更换内容效果
原文地址：https://www.cnblogs.com/zhangzhiyong/p/9652246.html