文档章节

纯css实现tab导航

o
 osc_fmg49rzg
发布于 2019/03/20 11:55
字数 435
阅读 14
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

仿照这个

实现了一个纯css的导航功能

html

<div class="main">
    <div id="contain1">列表一内容</div>
    <div id="contain2">列表二内容</div>
    <ul class="tab">
        <li><a href="#contain1">列表一</a></li>
        <li><a href="#contain2">列表二</a></li>
    </ul>
</div>

 

 

css

.main{
    position: absolute;
    left: 50%;
    top:30%;
    transform: translate(-50%,-50%); /*translate(x,y) 定义 2D 转换。*/
}
.tab {
    margin: 0;
    padding: 0;
    overflow: hidden;/*overflow 规定当内容溢出元素框时发生的事情。*/
    list-style-type: none;/*list-style-type 设置列表项标记的类型*/
}

.tab li {
    float: left;
}

.tab li a {
    text-decoration: none;/*text-decoration 添加到文本的装饰效果*/
    color: #000;
    background: #ddd;
    display: inline-block;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

#contain1,
#contain2 {
    display: none;
    width:240px;
    height:100px;
    border:1px solid #ddd;
    position: absolute;
    top:40px;
    padding:10px;
    box-sizing: border-box;/*box-sizing 允许您以确切的方式定义适应某个区域的具体内容。*/
}

/*关键部分*/
/*:target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素
当 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
它需要一个 id 去匹配文档中的 target 。*/
#contain1:target, #contain2:target { display: block; }

/*触发变色*/
/*兄弟选择符 ~*/
/*E~F{ cssRules } ,CSS3 兄弟选择符(E~F) ,选择 E 元素后面的所有兄弟元素 F*/
/*E~F 只能选择 E 元素 之后 的 F 元素,所以顺序就显得很重要了*/
/*CSS3 :nth-child() 选择器*/
/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。*/
/*n 可以是数字、关键词或公式。*/
#contain1:target ~ .tab li:nth-child(1) a{ background:skyblue; color:#fff; } #contain2:target ~ .tab li:nth-child(2) a{ background:skyblue; color:#fff; }

https://www.cnblogs.com/bgwhite/p/9414282.html

https://www.jianshu.com/p/616774052c61

http://www.w3school.com.cn/cssref/index.asp

http://www.w3school.com.cn/cssref/selector_nth-child.asp

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
神奇的选择器 :focus-within

CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时...

osc_8ouyb53z
2018/08/02
1
0
最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯
2011/06/17
6.8K
15
5 个简单实用的 CSS3 Tab 菜单

Tab菜单是一种比较特殊的菜单,和其他菜单不同,Tab菜单更多的是帮助用户在更狭小的范围内导航所要阅读的内容,通过对Tab页的切换,用户可以在有限的空间内找到更多感兴趣的内容。下面给大家...

tp_wire
2012/07/09
3.4K
4
Layui 1.0.3 发布,经典模块化前端 UI 解决方案

Layui 1.0.3 发布了。 更新日志 集成 layer 3.0 重点增加导航菜单的二级菜单支持(水平导航和树形导航都支持) 表单select增加optgroup的分组支持 富文本编辑器新增获取选中内容的方法:lay...

贤心
2016/11/10
4.9K
20
分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire
2012/06/14
493
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 公主是大王的,命是自己的。小怪也要养家糊口啊!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :郭燕的单曲《下半生》 最近听一些轻快的歌 #今日歌曲推荐# 《下半生》 - 郭燕 手机党少年们想听歌,请使劲儿戳(这里) @锦年 :...

小小编辑
16分钟前
7
0
Git不断提示我输入密码 - Git keeps prompting me for a password

问题: I've been using Git for a while now, but the constant requests for a password are starting to drive me up the wall. 我已经使用Git一段时间了,但是不断要求输入密码的人开始把......

fyin1314
25分钟前
12
0
未捕获ReferenceError:未定义$? - Uncaught ReferenceError: $ is not defined?

问题: How come this code throws an 此代码如何引发 Uncaught ReferenceError: $ is not defined 未捕获的ReferenceError:未定义$ when it was OK before? 以前什么时候可以? $(document......

javail
55分钟前
12
0
263. Ugly Number

题目: 263. Ugly Number 题目地址:https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers......

JiaMing
今天
60
0
HCIA_ARP01

ARP(地址解析协议) eNSP 常用路由器:AR2220 常用交换机:S5700、S3700 常用终端:PC、MCS(主播服务器) 设备连线:Copper(以太网用到的双绞线)、Serial(串口线,2SA接口)、Auto(自动连...

创业789
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部