html 自动切换tab栏,html 实现tab切换的示例代码
tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,今天介绍两种只用css实现tab切换方法:
方法一:
原理:通过label标签的关联属性和input的单选类型实现相应div的显示
1.创建一个类名为wrap的div当作容器
2.创建四个label标签,这将作为tab切换项
3.在每一个label中创建一个span标签(导航内容),input标签(实现选中于取消选中)type类型为radio,还要创建一个div作为这个导航项被点中是显示内容框,
这里要注意的是input标签的name必须是相同的,我这边取名叫tab
最终HTML为下面这样:
home
list
news
mine
重要的css,通过将input的width设为0使得input的那个小圆点不现实,又通过label的关联用导航项的点击实现input的checked,然后通过input:checked+div{display:block}实现相应div的显示
*{margin: 0;padding: 0;}
.wrap{
margin: 20px auto;
width: 403px;
height: 600px;
border:1px solid brown;
position: relative;
}
label{
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height:30px;
border-right: 1px solid brown;
border-bottom: 1px solid brown;
}
label:nth-of-type(4){
border-right: none;
}
label span{
cursor: pointer;
}
label div{
width: 403px;
height: 568px;
position: absolute;
left: 0;
top: 31px;
background: #eeeeee;
display: none;
}
label input{
width: 0;
}
input:checked+div{
display: block;
}
方法二:
原理:通过a标签的锚点实现切换,也就a的href的路径是要切换div的id
1.创建一个类名为wrap的div作为容器
2.创建一个类名为nav的div,在里边创建四个a标签,a标签的href分别是要切换到的div的id
3.创建一个和nav兄弟关系的类名为sh的容器用来放置切换的div
4.创建显示内容div,id分别和上面a标签对应
最终代码如下:
home
list
news
mine
css样式设置,即将类名为sh下的div设置为display:none;然后通过div:target{display:block}实现显示选中项
*{margin: 0;padding: 0}
.wrap{
width: 400px;
height: 600px;
border: 1px solid brown;
margin: 20px auto;
position: relative;
}
.nav{
width: 100%;
height: 30px;
}
.nav a{
width: 99px;
height: 30px;
text-align: center;
line-height: 30px;
border-right: 1px solid brown;
border-bottom: 1px solid brown;
float: left;
text-decoration: none;
color:black;
}
.sh{
width: 400px;
height: 569px;
position: absolute;
left: 0;
top:31px;
background: #eeeeee;
}
.sh div{
display: none;
text-align: center;
}
.sh div:target{
display: block;
}
到此这篇关于html 实现tab切换的示例代码的文章就介绍到这了,更多相关html tab切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
html 自动切换tab栏,html 实现tab切换的示例代码相关推荐
- 点击tab栏如何让tab置顶
效果要求: 实现类似vant中滚动导航的效果: 储备知识,可以先看一下我之前的一篇文章: client相关知识 1.通过计算排在tab前面元素的高度: 2.通过window.scrollTo()进行页 ...
- echarts折线图y轴根据数值自动_Python matplotlib 绘制双Y轴曲线图的示例代码
双X轴的 可以理解为共享y轴 ax1=ax.twiny() ax1=plt.twiny() 双Y轴的 可以理解为共享x轴 ax1=ax.twinx() ax1=plt.twinx() 自动生成一个例子 ...
- js实现tab栏的切换
目录 实现点击变色效果: 点击之后下面的内容跟着变化 全部代码: 最后: 界面效果图如上,点击第二栏后第二栏变为红色,下面显示第二栏的内容. html代码:如下 <header class=&q ...
- 前端与移动开发----JS高级----面向对象编程,类与实例对象,继承,严格模式,模板字符串,class封装tab栏
JS高级01 回顾上阶段 Javascript组成 ECMAScript: 基础语法 (变量, 表达式, 循环, 判断, 函数, 对象等) DOM: document 操作标签(获取, 增加, 插入, ...
- 磨砂玻璃效果的Tab栏
效果图先上 这是我在b站跟写模仿的,据我观察这教材应该是从外网扒的,所以我就不贴链接了. 代码放在这里. html: <!DOCTYPE html> <html lang=" ...
- flutter几种常用的底部tab栏
文章目录 普通tab栏 底部凹型tab栏 底部凸型tab栏 普通tab栏 效果图: int _selectIndex = 0;static const TextStyle optionStyle =T ...
- tab栏自动切换功能 鼠标移动上去取消自动切换 离开启动自动切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name= ...
- 原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)
1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
最新文章
- 站在历史的长河中做农活
- Why HashMap Extends AbstractMap and Implement Map
- 微信jssdk,实现多图上传的一点心得
- 不要和Java“结婚”
- 生成对抗网络简介(包含TensorFlow代码示例)【翻译】
- 获取Servlet原生的API
- python各种数据类型的常用方法_python的基本数据类型:列表的方法
- .net应用程序中添加chm帮助文档打开显示此程序无法显示网页问题
- 【发现问题】IDEA设置全局新创建文件默认换行符
- 世界杯29场点球大战的269个点球数据都在这里!霍金的公式帮了英格兰吗?
- 第四点没有重定义吧,第一个i的作用域就是那个循环,它出了这个域就被释放了。...
- Windows via C/C++ 学习(8)CreateProcess 函数
- linux iptables添加mysql访问
- 每日一句20200103
- 相关系数显著性检验以及Python实例
- 日记侠:原来写文章竟然是为了这个
- 深入浅出理解SVM支持向量机
- D - Oil Deposits
- 集体的智慧:为什么SaaS打败企业软件?
- 采用动态规划思维求解数塔问题,c++实现
热门文章
- 周杰伦专辑《最伟大的作品》在哪看?当贝盒子畅享周董最新MV
- pytorch RuntimeError: size mismatch, m1: [16 x 86016], m2: [25088 x 512] at /opt/conda/conda-bld/pyt
- 打印机扫描显示服务器拒绝访问,打印机拒绝访问,教您打印机拒绝访问怎么解决...
- Deepin安装搜狗中文输入法
- 英语各种数字表达方式大全(转载)
- 安卓反编译smali代码注入第三方广告
- 学校的计算机教室火灾级别,校园火灾事故案例统计基本数据表.doc
- 【学习笔记】计算机网络-DNS层次查询
- 计算机中的数据(原码,反码,补码)
- 添加五笔输入法(默认的)windows sever 2012 r2