相信很多小伙伴都看过，点击切换内容技术，今天我们简单说一下在不用js的情况下实现内容切换。

html代码：

css代码：

完成效果：

源代码如下：

有用的到的地方可以直接复制代码，可以直接使用哦~也可以用来点击切换照片，只需要把，下面div里面文字内容换成img就可以了.

首先要设置两个按钮botton，再在按钮下设置相对应的框，框一和框二

<div class="main"><p class="qr"><i class="iconfont icon-saomiaoerweima"></i></p><input type="radio" name="gender" id="bro1" /><label for="bro1">登录</label><div class="main-move">框一</div><input type="radio" name="gender" id="bro2" checked /><label for="bro2">注册</label><div class="main-move">框二</div>

css代码如下：

首先，设置外层wrapper宽高、背景验证、水平居中、相对定位

再设置内层div相对于父级绝对定位，默认隐藏

再设置label宽高、行内块、文本居中、行高、字体大小、字体颜色

然后默认所有radio隐藏

再被选中的radio下的label下的div显示

最后被选中的radio下的label

/* 设置外层main宽高 */.main {width: 450px;height: 570px;position: relative;top: 150px;left: 120px;box-shadow: 2px 2px 2px rgb(249, 249, 249);margin: 0 auto;}/* 设置内层div相对于父级绝对定位，默认隐藏 */.main div {display: none;position: absolute;top: 50px;}/* 设置label宽高、行内块、文本居中、行高、字体大小、字体颜色 */label {width: 100px;height: 50px;display: inline-block;text-align: left;line-height: 50px;font-size: 22px;color: black;}label::after {content: '';display: block;width: 45px;height: 4px;background-color: rgb(255, 92, 0);position: relative;top: -10px;}/* 默认所有radio隐藏 */input[type="radio"] {display: none;}/* 被选中的radio下的label下的div显示 */input[type="radio"]:checked+label+div {display: block;}/* 被选中的radio下的label*/input[type="radio"]:checked+label {font-weight: 900;}

HTML<label>标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

支持的浏览器：

语法

<label for="male">Male</label><input type="radio" name="sex" id="male">