今日在防站项目中遇到某一个模块需要制作Tab点击式的切换菜单栏，通过Js或者jQuery比较容易实现，可是实在是不懂Js，所以寻求通过CSS实现，其实用CSS也有几种方式可以实现Tab菜单栏切换效果，在百度里搜索了我认为是最简单的方法，一种纯CSS3制作Tab切换菜单栏，具体实现代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切换栏</title>
<style>
/*清除浏览器内外边距*/
*{
margin: 0;
padding: 0;
}
/*清除li前面小圆点*/
ul li{
list-style: none;
}
/*清除a标签下划线，并将字体颜色设置为红色*/
a{
text-decoration: none;
color: red;
}
/*最外层容器盒子样式*/
.tab{
display: flex;
position: relative;
width:50rem;
margin: 0 5rem;
min-height: 10rem;
padding: 1rem;
}
/*Tab菜单栏导航栏样式*/
.tab-nav{
position: absolute;
top:0;
font-size: 1.125rem;
}
.tab-nav li{
display: inline-block;
background-color:#0b9e94;
}
.tab-nav li a{
display: block;
padding:.5rem 1rem;
}
/*Tab菜单栏列表样式*/
.tab-list{
position: absolute;
width: 100%;
min-height: 7rem;
top:3rem;
background-color:#0b9e94;
color: #999999;
}
/*显示控制*/
#hot:target,#new:target{
z-index: 1;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-nav">
<li><a href="#hot">最热</a></li>
<li><a href="#new">最新</a></li>
</ul>
<div id="hot" class="tab-list">
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</div>
<div id="new" class="tab-list">
<ul>
<li>我是第1个人</li>
<li>我是第2个人</li>
<li>我是第3个人</li>
<li>我是第4个人</li>
<li>我是第5个人</li>
<li>我是第6个人</li>
<li>我是第7个人</li>
<li>我是第8个人</li>
<li>我是第9个人</li>
<li>我是第10个人</li>
</ul>
</div>
</div>
</body>
</html>
整体思路如下：
一个大容器盒子内将Tab菜单栏和列表栏放入其中，并给最外层的容器盒子设置高度，再通过定位的方法将Tab导航栏及列表展示列表的位置固定下来，并设置锚点链接，最后通过锚点链接的伪元素target的z-index属性控制显示。
在撸代码制作Demo过程中遇到一个小问题：#hot和#new的两个容器内的文字一直重叠显示，锚点链接的伪元素target的z-index属性貌似一直未生效。后经过查找问题，发现主要是因为没给tab-list设置文本和背景颜色所导致。
大牛勿喷，本人实属菜鸟，通过这个Demo发现自己对于某些CSS3的元素及属性还是不够熟悉。