html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover
移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中,“子凭父贵”,父元素层级高的,其导航内容在重叠状态中显示在最上面
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
/*重点代码*/
.navI:hover{position:relative;z-index:1;}
.navI:hover .navI-tit{background:#fff;border-bottom:none;}
课程
课程内容
学习计划
学习计划内容
技能图谱
技能图谱内容
2.锚点
点击导航标题时,触发target伪类,改变对应的导航内容的层级z-index,从而使当前导航内容在三个导航内容中胜出,在最上层显示;与此同时,改变当前导航标题的样式
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;position:relative;}
.navI-tit{position:absolute;top:0;left:0;right:0;box-sizing: border-box;line-height: 40px;height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{z-index:1;}
/*重点代码*/
.navI-txt:target{position:relative;z-index:1;}
.navI-txt:target ~ .navI-tit{background:#fff;border-bottom:none;}
课程内容
课程
学习计划内容
学习计划
技能图谱内容
技能图谱
3.radio
点击导航标题时,触发checked伪类,改变对应的导航内容的层级z-index,从而使当前导航内容在三个导航内容中胜出,在最上层显示;与此同时,改变当前导航标题的样式
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
课程
学习计划
技能图谱
总结
以上所述是小编给大家介绍的CSS实现Tab页切换实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html图片多tab切换代码,CSS实现Tab页切换实例代码相关推荐
- html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- html切换搜索引擎,JavaScript切换搜索引擎的导航网页搜索框实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: #search ul { list-style-type: none; display: block; width: 100px; height: ...
- html如何绘制棒棒糖,css画一个棒棒糖的实例代码
背景:每天进步一点点,多积累一点点.就会越来越棒 代码: 棒棒糖 用css画一个棒棒糖 要求: 1:棒棒糖中间文字为水平居中 2:不得少于三层颜色 .round{ width: 100px; heig ...
- python用什么软件编程1001python用什么软件编程-Python中免验证跳转到内容页的实例代码...
相信很多人在浏览网页时,经常会碰到需要输入验证码才可以继续浏览的情况吧,遇到这种问题,大多数人只能进行繁琐的注册验证,今天小编教大家只要使用python就可以免验证方法. 以经常用到的解答网站――上学 ...
- python怎么跳转到某一行代码_Python中免验证跳转到内容页的实例代码
在本篇文章里小编给大家整理的是一篇关于Python中免验证跳转到内容页的实例代码,有兴趣的朋友们可以学习分享下. 相信很多人在浏览网页时,经常会碰到需要输入验证码才可以继续浏览的情况吧,遇到这种问题, ...
- php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码,废话不多说了,直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码 废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
- python读取word页眉_python批量替换页眉页脚实例代码
简介 本文分享的实例代码主要通过python语言实现批量替换页眉页脚的操作功能,具体如下. 代码 #!/usr/bin/env python # -*- coding: utf-8 -*- impor ...
- php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
- HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码),复制代码 代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码 代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
最新文章
- Java基础语法纯小白入门
- python函数几个return语句_Python常用函数--return 语句-阿里云开发者社区
- Ubuntu下mysql中文乱码的解决
- 关于ShopEx的二次开发的目录结构及各文件功能
- 各种学习资源 文档、手册 (Docker 、springboot 、Guava、git、logback 、Linux 、MQ、vue、Axios)
- 2-16 mysql主从复制
- 远程命令,代码执行漏洞原理
- 【传统编码技术对比】汉明码,RS,卷积码三种编码技术的对比
- svn添加新项目的步骤
- 辨别尸体死亡时间! [转]
- 面向对象的15位、18位中国大陆身份证号码解析、验证工具
- 班门弄斧之机械设计理论
- linux运行img文件格式,img是什么格式?img文件怎么打开?
- 【图像检测-缺陷检测】基于灰度共生矩阵实现痕迹检测matlab代码
- 大沱湾水电站拦河闸坝设计
- cpu、socket、core、thread 等术语之间的关系
- 家乐福618保卫战二-零售O2O场景中的万级并发交易情况下的极限性能调优
- Web Storage知识点梳理,模拟后台管理系统部分功能
- 大搜车:云上多地域高可用消息系统的构建
- BigDecimal使用时遇到的问题