html 导航菜单切换效果,纯CSS实现Tab导航栏切换

效果：

代码：

html：

列表一内容

列表二内容

列表一
列表二

css：

.main{

position: absolute;

left: 50%;

top:30%;

transform: translate(-50%,-50%);

}

.tab {

margin: 0;

padding: 0;

overflow: hidden;

list-style-type: none;

}

.tab li {

float: left;

}

.tab li a {

text-decoration: none;

color: #000;

background: #ddd;

display: inline-block;

width: 120px;

height: 40px;

text-align: center;

line-height: 40px;

}

#content1,

#content2 {

display: none;

width:240px;

height:100px;

border:1px solid #ddd;

position: absolute;

top:40px;

padding:10px;

box-sizing: border-box;

}

#content1:target,

#content2:target {

display: block;

}

#content1:target ~ .tab li:nth-child(1) a{

background:skyblue;

color:#fff;

}

#content2:target ~ .tab li:nth-child(2) a{

background:skyblue;

color:#fff;

}

css关键部分：

#content1,

#content2 {

display: none;

}

#content1:target,

#content2:target {

display: block;

}

#content1:target ~ .tab li:nth-child(1) a{

background:skyblue;

color:#fff;

}

#content2:target ~ .tab li:nth-child(2) a{

background:skyblue;

color:#fff;

}

html 导航菜单切换效果,纯CSS实现Tab导航栏切换相关推荐

css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html如何实现切换效果,纯CSS实现页签切换效果
主要运用了 CSS3 的 :checked 选择器, 代码结构跟使用js差不多,只是多了几个radio, 不知道性能上是js快还是css快呢? CSS3 TAB body { font-family: ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
html 栏目切换幻灯片效果,很酷的切换效果纯CSS3幻灯片实现
很酷的切换效果纯CSS3幻灯片实现 11月 18, 2013 评论 (4) Sponsor CSS3实现给我们带来太多惊喜,FLASH能实现的动画,很多CSS3也可以实现,正如今天为大家展示的纯HT ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
这篇文章,主要介绍Android如何利用DrawerLayout布局组件实现侧滑导航菜单的效果. 目录一.侧滑菜单栏 1.1.效果演示 1.2.DrawerLayout布局介绍 (1)打开侧边栏
纯CSS实现侧边栏/分栏高度自动相等
一.为何要分栏高度一致? 分栏高度一致的目的是更加美观.举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏此时最担心的问题就是高度不一致,尤其是无边框属 ...
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
JavaScript之衣服相册切换效果(类似淘宝商品图切换) 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> &l ...

html 导航菜单切换效果,纯CSS实现Tab导航栏切换

html 导航菜单切换效果,纯CSS实现Tab导航栏切换相关推荐

最新文章

热门文章