OK，时间比较紧迫，直接进入主题。
1.锚点是什么？
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接（官方解释）。
其实锚点就是一个定位器，点击该锚标后页面就会滚动到对应标记的位置。
2.使用锚点简单定位
HTML代码：
<img id="hot" src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg">
<p>我了个擦，当我色盲吗，这叫衣服穿的少！！</p>
<p><a href="#hot"><img src="/sp/slide/img/share/intro-7.jpg"></a></p>
当点击超链接后，浏览器的地址后会加上#hot，然后会去寻找id为hot的元素，并定位(其实是滚动)到该位置，这是张鑫旭大佬写的Demo。
注意：要定位的元素的父元素必须有滚动条才可以
3..使用锚点制作选项卡
假如要做一个有三个选项的选项卡，写三个按钮和对应的一个包含三个div块(三个选项卡)的div块，设置外层div块和内层div块的高度相同，
这时候外层div块放不下内层的，所以需要设置外层，overflow：hidden，隐藏超出的块。
此时利用锚点实现点击按钮，跳出对应的选项卡，下面是我写的一个小Demo
<div>
<a href="#first"><button>选项卡一</button></a>
<a href="#second"><button>选项卡二</button></a>
<a href="#third"><button>选项卡三</button></a>
</div>
<div class="test">
<div id="first" >我是儿子</div>
<div id="second" >我是爸爸</div>
<div id="third" >我是爷爷</div>
</div>
.test {
width: 300px;
height: 100px;
margin: auto;
border: 1px solid black;
overflow: hidden;
}
#first,#second,#third{
height:100px;
}
当点击选项卡二后，链接后会加上 #second，会滚动到对应的id的位置，为什么是滚动？接着往下看。
运行结果就是点击对应按钮，展示对应的选项卡
继续来说，为什么点击按钮后是滚动定位? 我们把overflow设为auto来看看
我们把滚动条设置为hidden时候，看不到滚动条因此也看不出滚动。此时设置为auto滚动条显示了出来，所以为什么是滚动定位就很明显了。
到此一个基于锚点的选项卡就已经实现了，一定要自己动手做一做，如果对你有帮助，还请点个赞鼓励一下哈！
