移动端选项卡效果

在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。简单的选项卡实现起来比较容易，只要监听选项按钮并控制相应内容的现实与隐藏。如果只是单纯的显示和隐藏的话，对于用户的体验不好。所以改单纯的显示与隐藏为滑动的效果，要实现滑动的效果就需要满足以下几个条件：
1.所有选项卡都应该包含在同一个元素之中，通过父元素位置的改变来达到滑动的效果；

2.由于各个选项卡的高度不一致，所以应该在滑动结束后实时动态的去改变父元素的高度。选项卡实现效果图：

实现的思路是构造一个基础函数用于实现父元素的移动，传入的参数有移动的方向以及移动的距离。本设计中该选项卡有三个选项，所以移动的方向有两个而移动距离有两种情况，分别是滑动一屏和滑动两个屏幕的长度，同样这里为了兼容各个不同的设备采用的是相对单位，一个屏幕的宽度等于10rem。然后构造第二个函数，根据传入的现在选项卡的id和要显示选项卡的id，在条件语句中执行相应的滑动函数。除了这两个函数之外还需要添加相关的监听事件来确定起始位置与目标位置。
首先通过HTML代码，看下页面的结构是怎样的：

        //页面的头部，包含三个按钮
        div.header
            span#header-info.header-focus 基本信息
            span#header-more