有了前面制作滑动轮播图的经验，再来做个选项卡切换的非常容易了，跟我们在轮播图下面新增点选功能基本是一样的，当我把鼠标放到那个选项上就切换到哪张图，同时选项卡的背景色跟随鼠标移动而变化，下面是效果图。
工具/原料
JavaScript
方法/步骤
1
同样的我们第一步先写出HTML基本代码，这里我们有四个选项和四张图，鼠标放到哪个选项上下面就显示对应的图出来，默认给第一个选项选中效果和第一张图显示效果，所以分别加了active和show属性。
3
这里需要注意的是我设置了box-sizing: border-box;属性，所以在计算容器宽高时要把边距所以我们也计算在内，不然会出错，这种方式比较适合百分比的时候用，这时页面载入的时候看到如下的效果：
4
第三步就是交互效果了，用JavaScript获取我们需要进行交互的元素，然后遍历我们的nav列表，当我们将鼠标放置到对应的选项时将其他几个选项的active样式去除，而picture则将其他几个的show样式去除，只留本身的样式。
5
这样我们就得到了上图的效果了，这个思路不止可以用在图片切换上，content中可以放入任何你想要显示的内容，下面是完整代码，有兴趣的可以试试。
6 选项卡
