如何用html实现选项卡切换,Css如何实现tab选项卡切换

Css实现tab选项卡切换的方法：利用target的特性，可以实现纯css的tab效果切换，代码为【#tab1:target,#tab2:target,#tab3:target{z-index:1;}】。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

Css实现tab选项卡切换的方法：

CSS3伪类target

利用target的特性，可以实现纯css的tab效果切换

示例代码如下

代码如下:

.tabmenu{

position:absolute;

top:-28px;

left:144px;

margin:0px;

}

.tabmenu li{

display:inline-block;

}

.tabmenu li a{

display:block;

padding:5px 10px;

margin:0 10px 0 0;

border:1px solid #91a7b4;

border-radius:5px 5px 0 0;

background-color:#e3f1f8;

color:#333;

text-decoration: none;

font-size:16px;

}

.tablist{

position:relative;

top:200px;

margin:0 auto;

width:600px;

min-height:200px;

}

.tab_content{

position:absolute;

width:600px;

height:170px;

padding:15px;

border:1px solid #91a7b4;

border-radius:10px;

box-shadow:0 2px 3px rgba(0,0,0,0,1);

font-size:16px;

line-height:16px;

color:#666;

background-color:#fff;

}

#tab1:target,#tab2:target,#tab3:target{

z-index:1;

}

tab1
tab2
tab3

tab1

tab2

tab3

最关键的代码

代码如下:

#tab1:target,#tab2:target,#tab3:target{

z-index:1;

}

先根据target的特性锚链接到对应的div,再根据z-index的属性，改变div的层级关系，从而实现tab的切换效果！

target兼容性

最后提一下兼容性问题：因为这是CSS3新特性，所以不兼容老版本的浏览器，例如IE678。

如何用html实现选项卡切换,Css如何实现tab选项卡切换相关推荐

tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换效果图: 源代码: Tab标签切换 body{ background:#fff;} *{ mar ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
【vue案例】vue实现tab选项卡
vue实现tab选项卡文章目录 vue实现tab选项卡一.效果图展示二.静态页面结构 css html javascript 三.vue实现 1.将静态结构和样式重构为基于vue模板语法的形式 ...
钉钉小程序实现Tab选项卡
引言:小程序开发中,有很多封装好的控件,但是常用的tab选项卡没有,所以网上查了资料,可以根据view+swiper来实现,于是自己跟着也写了一个,由于自己刚接触钉钉小程序,网上资料还是蛮少的,所以这 ...
IDEA设置Tab选项卡
IDEA设置Tab选项卡本人喜欢把tab选项卡全部放出来(tab选项卡默认是10个,超过后会把最先打开的挤出去,像队列一样先进先出),比如这样(多行显示): 当然也有人喜欢这样的(一行显示): 如果 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...

如何用html实现选项卡切换,Css如何实现tab选项卡切换

如何用html实现选项卡切换,Css如何实现tab选项卡切换相关推荐

最新文章

热门文章