纯css实现tab导航的切换,非常实用

洪七公 · 发表于 2022-4-18 22:27:16

实现了一个纯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;
}

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] 纯css实现tab导航的切换,非常实用