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

home-page

list

list-page

news

news-page

mine

mine-page

重要的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-page
list-page
news-page
mine-page

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切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/526252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html匹配属性正则表达式,正则表达式匹配html标签的属性值

html">正则表达式是做文本解析工作必不可少的技能。如Web服务器日志分析,网页前端开发等。很多高级文本编辑器都支持正则表达式的一个子集,熟练掌握正则表达式,经常能够使你的一些工作事半功倍。例如统计代码行数,只需一个…

同一个html页面中两个area,HTML中的map和area标签

1. 标签介绍&#xff1a;(1)map标签&#xff1a; 该标签是指图片的映射&#xff0c;也就是说一张可以点击的图片的映射&#xff1b;属性介绍&#xff1a;<1> id: 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)<2>name:同上说明&#xff1a;不同的浏览…

html 响应式布局 九宫格,两种方法实现响应式九宫格布局

html布局以及基础样式代码如下响应式九宫格html, body { color:#222; margin:0; padding: 0; text-decoration: none; }ul { list-style: none outside none; margin:0; padding: 0; }body { background-color:#eee; }ul li:nth-child(8n1) {background-color:#36A1DB}ul li:nt…

html跳转网页为什么网页无法访问,朋友的网站被网址跳转,导致官网无法正常访问...

原标题&#xff1a;朋友的网站被网址跳转&#xff0c;导致官网无法正常访问昨天中午接到客户的一个电话&#xff0c;告知其某个网站打开之后直接跳转到其他的网站。客户的这个网站&#xff0c;不是我们做的&#xff0c;但是关系一直保持的不错&#xff0c;所以就顺带给他解决一…

2021中卫一中高考成绩查询,2021年宁夏高中排名及分数线 高考本科升学率排行榜...

2019年宁夏高中排名及分数线 高考本科升学率排行榜如何判断一所高中学校的优劣好坏&#xff0c;人们往往从这几个方面来看&#xff1a;高考/竞赛成绩、生源质量、师资力量、软硬件设施、管理水平等。高考成绩因为最直接&#xff0c;最广为关注&#xff0c;但是很多时候未免有失…

微观经济学如何计算机会成本,【微观经济学】机会成本

概念&#xff1a;机会成本机会成本是指你做了某项选择&#xff0c;而不得不因此失去的其他利益。比如你选择了A&#xff0c;就必须放弃B&#xff0c;B就是A的机会成本。对企业来说&#xff0c;最优方案的机会成本&#xff0c;就是次优方案可能带来的收益。机会成本是听起来很简…

如何注释python中html,Python在HTML中提取带注释的代码,python,html,被

假设被注释代码段如下&#xff1a;html""""""如果直接对此代码段使用pyquery转换并提取from pyquery import PyQuery as pqresponse pq(html)("div.forum_content")print(response)会报错&#xff1a;lxml.etree.ParserError: Docume…

基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究...

崔月娇一、教学现状概述一方面&#xff0c;我校是面向全国招生&#xff0c;部分欠发达地区的学生由于资源配置导致计算机基础相当薄弱&#xff0c;而来自发达地区的学生早早地接触了计算机&#xff0c;部分计算机基础操作已相当熟练&#xff0c;学生的计算机水平参差不齐&#…

计算机专业和机电专业的区别,12届计算机专业和机电专业.doc

12届计算机专业和机电专业12届计算机1班、12届机电1、2、3、4班《计算应用基础》月考试题学号&#xff1a;_________ 姓名&#xff1a;_________ 班级&#xff1a;_____________考试说明&#xff1a;1、考试时间90分钟2、总分&#xff1a;100分3、应用的班级有12计算机1班、12届…

计算机基础知识上机操作excer,《计算机应用基础》Excel上机操作练习题.doc

《计算机应用基础》Excel上机操作练习题.doc《计算机应用基础》Excel上机操作练习题第1题 建立一工作簿&#xff0c;并作如下操作1&#xff0e; 在Sheet工作表中输入如下内容&#xff1a;在A1单元格中输入&#xff1a;中华人民共和国以数字字符的形式在B1单元格…

angularjs html 缓存,如何删除使用AngularJS的HTML中的浏览器缓存?

如何删除HTML浏览器的缓存&#xff0c;它使用AngularJS&#xff1f;我在我的index.html中使用了以下内容。我也尝试在我的app.js中使用$templateCache&#xff0c;但没用。如何删除使用AngularJS的HTML中的浏览器缓存&#xff1f;app.config([$routeProvider, function($routeP…

dede列表页if判断输出html,首页、列表页调用文章body内容的两种方法

随着源码的开放性&#xff0c;很多SEOER对页面的要求也越来越复杂多样性&#xff0c;很多时候&#xff0c;织梦系统的原有功能并不能满足seoer的页面布置要求&#xff0c;这就需要继续开发页面&#xff0c;做更多的功能调用。今天徐金华SEO给大家讲的是关于首页、列表页调用文章…

计算机如何驱动无线网络,win7如何安装无线网卡驱动 安装无线网卡驱动的方法...

今天告诉大家win7安装无线网卡驱动&#xff1f;无线网卡就是既能接受无线信号&#xff0c;又能发射无线信号的网络设备&#xff0c;但无线网卡就需要安装无线网卡驱动。许多新手用户不懂安装步骤&#xff0c;其实安装方法简单&#xff0c;接下来给大家说明一下win7安装无线网卡…

闽江师范专科高等学校计算机专业在哪个校区,闽江师范高等专科学校有几个校区(官网发布数据)...

闽江师范高等专科学校有几个校区一直都是大家关注的问题之一&#xff0c;根据闽江师范高等专科学校官方网站的学校简介&#xff0c;我们将闽江师范高等专科学校一共有多少个校区的资料缓存到本页&#xff0c;给需要了解的同学参考&#xff0c;最新校区新增&#xff0c;校区合并…

计算机网络技术俄罗斯方块,《The Tetris Effect》:这本新书讲述了俄罗斯方块的传奇故事...

原标题&#xff1a;《The Tetris Effect》:这本新书讲述了俄罗斯方块的传奇故事在游戏发展史上&#xff0c;俄罗斯方块是个传奇。没有一款游戏像它一样影响深远&#xff0c;受到全球不同人的喜爱。在即将出版的《The Tetris Effect》(俄罗斯方块效应)中&#xff0c;科技记者 Da…

计算机主机响是什么原因,电脑主机发出不同的响声及解决措施

电脑在使用一段时间后&#xff0c;难免都会遇到些小问题。如很多朋友使用的台式电脑&#xff0c;在开机的时候&#xff0c;主机就会发出很大的响声。其实当主机发出不同响声时&#xff0c;就代表着不同的故障&#xff0c;我们可以根据相应的响声来找出故障的所在。今天U大侠小编…

计算机课具体任务驱动,计算机基础课程的任务驱动的教学设计与实践论文

任务驱动 教学模式设计是基于多维、互动式的 (教师)主导—(学生)主体相结合 的教学设计理念。针对计算机课程在基础方面的教育,我国已经在上世纪八十年代纳入到了教育基础体系之中,经过阶段性努力,在这一方面已经开始逐步形成模式,并具备一定程度上的规格。以下是学习啦小编为大…

酒店管理与计算机技术结合,(定稿)某酒店内部管理系统的开发与应用(完整版)...

《某酒店内部管理系统的开发与应用.doc》由会员分享&#xff0c;可免费在线阅读全文&#xff0c;更多与《(定稿)某酒店内部管理系统的开发与应用(完整版)》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、系统测试功能测试测试总结结论参考文献致谢错误&#…

计算机软考中级能评职称吗,软考中级是中级职称么?考此证后可以办理落户么?...

问&#xff1a;上海居转户的中级职称是必备条件&#xff0c;软考中级算中级职称么&#xff1f;上海居住证积分网陈老师回答&#xff1a;算的&#xff0c;上海居转户承认软考中级或高级证书&#xff0c;当然&#xff0c;软考中级也同样适合居住证积分。软考中级哪个好&#xff1…

东莞 小学计算机编程大赛,关于举办第二十一届东莞市中小学电脑制作活动的通知...

各园区、镇(街道)教育管理中心、市直属学校&#xff1a;“全国中小学电脑制作活动”开办二十届以来&#xff0c;我市中小学生的电脑作品水平不断提高&#xff0c;在全省甚至全国的“中小学电脑制作活动”中取得优异成绩。为了继续办好这项活动&#xff0c;更好地为全国、全省竞…