前言：上一篇小编通过使用input和label实现了tab栏的切换，并在最后让大家试着另一种方法实现，那么小编说到做到今天就用另一种方式（锚点功能）实现tab栏的切换，大家支持一下哦！
锚点功能就是通过使用超链接来实现，在需要跳转的地方加上id属性，设置一个id值，然后在href属性里填上属性值，点击就可以跳转到相应的位置。使用以上思想来实现tab栏的点击切换。
请看示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
li {
/* 去除列表的样式并设置左浮动让其水平一行排列 */
list-style: none;
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
border: 1px solid black;
cursor: pointer;
margin-right: 5px;
}
li>a {
/* 去除a标签的默认样式 */
text-decoration: none;
}
/* 在内容区的外面设一个盒子，然后设置盒子外面的内容隐藏 */
.box {
width: 420px;
height: 200px;
border: 1px solid black;
margin-top: 55px;
position: absolute;
overflow: hidden;
}
.context {
width: 420px;
height: 200px;
}
</style>
<body>
<li><a href="#boxl">标题一</a></li>
<li><a href="#box2">标题二</a></li>
<li><a href="#box3">标题三</a></li>
<li><a href="#box4">标题四</a></li>
<div class="box">
<div id="boxl" class="context">
1111111
</div>
<div id="box2" class="context">
2222222
</div>
<div id="box3" class="context">
33333333
</div>
<div id="box4" class="context">
44444444
</div>
</div>
</body>
</html>
主体思想就是通过设置一个div窗口，在点击a标签时，对应的内容区就会跳转到这个窗口显示出来。就是让内容区竖着排列，然后给div窗口设置overflow: hidden; 让窗口外面的元素隐藏掉，这样会相当于实现一种切换效果。
运行效果图如下：
大家可以试着自己敲一敲哦！还请多多支持。