相信很多小伙伴都看过，点击切换内容技术，今天我们简单说一下在不用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">

css实现点击内容切换div相关推荐

纯html+css实现点击切换tab页
核心内容是使用单选框实现css的点击事件大致分析一下dom结构,被切换的tab页和按钮放在同一个li内一共需要切换三个页面,也就是说需要有三个li,首先写一下基本dom结构一.基础结构我使用的 ...
点击切换div 的隐藏与显示
点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
html中css与左侧距离,html 实现DIV+CSS 让左右内容之间保持一定距离
这篇文章主要为大家详细介绍了html 实现DIV+CSS 让左右内容之间保持一定距离,具有一定的参考价值,可以用来参考一下. 一般我们在一个外围DIV内针对两个DIV分别使用float 浮动属性(fl ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
js 左右箭头实现图片或div内容切换
js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右 ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

css实现点击内容切换div