利用锚点定位制作选项卡(点击对应选项显示对应内容)

OK，时间比较紧迫，直接进入主题。

1.锚点是什么？

是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接（官方解释）。

其实锚点就是一个定位器，点击该锚标后页面就会滚动到对应标记的位置。

2.使用锚点简单定位

HTML代码：

我了个擦，当我色盲吗，这叫衣服穿的少！！

当点击超链接后，浏览器的地址后会加上#hot，然后会去寻找id为hot的元素，并定位(其实是滚动)到该位置，这是张鑫旭大佬写的Demo。

注意：要定位的元素的父元素必须有滚动条才可以

3..使用锚点制作选项卡

假如要做一个有三个选项的选项卡，写三个按钮和对应的一个包含三个div块(三个选项卡)的div块，设置外层div块和内层div块的高度相同，

这时候外层div块放不下内层的，所以需要设置外层，overflow：hidden，隐藏超出的块。

没有设置overflow

设置overflow后

此时利用锚点实现点击按钮，跳出对应的选项卡，下面是我写的一个小Demo

        选项卡一

        选项卡二

        选项卡三

   

   

       

我是儿子

       

我是爸爸

       

我是爷爷

   

.test {

    width: 300px;

    height: 100px;

    margin: auto;

    border: 1px solid black;

    overflow: hidden;

}

#first,#second,#third{

  height:100px;

}

当点击选项卡二后，链接后会加上 #second，会滚动到对应的id的位置，为什么是滚动？接着往下看。

运行结果就是点击对应按钮，展示对应的选项卡

利用锚点制作的选项卡

继续来说，为什么点击按钮后是滚动定位? 我们把overflow设为auto来看看

overflow：auto

我们把滚动条设置为hidden时候，看不到滚动条因此也看不出滚动。此时设置为auto滚动条显示了出来，所以为什么是滚动定位就很明显了。

到此一个基于锚点的选项卡就已经实现了，一定要自己动手做一做，如果对你有帮助，还请点个赞鼓励一下哈！