实现底部Tab切换（网页）

首先会用到一个.css文件，自己去引用即可，文章最后给出下载地址。
样式：

header{ 
            background-color: #f2f2f2;
            padding-top: 20px//沉浸式的问题
        }
        header ul li { 
            height: 40px;
            line-height: 40px;
            text-align: center; 
            display: none; 
            color: white;
            position: relative;
            font-size: 16px;  
            background: #2BBC5B;
        }
        header ul li.active{ 
            display: block; 
        }
        #footer{ 
            background-color: #f2f2f2; 
        }
        /*padding-top图文间距 padding-bottom字体距离屏幕底部间距 color未选中时字体颜色*/
        #footer ul li{ 
            padding-top: 30px; 
            padding-bottom: 2px;
            background: url() no-repeat center 2px; 
            background-size: auto 25px;
            text-align: center; 
            color: #898C8B;
        }
        /*选中时字体颜色*/
        #footer ul li.active{
            color: #2BBC5B;
        }
        /*下面是选中时和未选中时的图片资源*/
        #footer ul li:nth-child(1){
            background-image: url(../image/home_unselected.png); 
        }
        #footer ul li:nth-child(2){
            background-image: url(../image/yunkuang_unselected.png); 
        }
        #footer ul li:nth-child(3){
            background-image: url(../image/jiaoyi_unselected.png);
        }
        #footer ul li:nth-child(4){ 
            background-image: url(../image/jiedian_unselected.png); 
        }
        #footer ul li:nth-child(5){
            background-image: url(../image/my_unselected.png); 
        }
        #footer ul li:nth-child(1).active{
            background-image: url(../image/home_selected.png); 
        }
        #footer ul li:nth-child(2).active{
            background-image: url(../image/yunkuang_selected.png); 
        }
        #footer ul li:nth-child(3).active{ 
            background-image: url(../image/jiaoyi_selected.png);
        }
        #footer ul li:nth-child(4).active{
            background-image: url(../image/jiedian_selected.png); 
        }
        #footer ul li:nth-child(5).active{ 
            background-image: url(../image/my_selected.png); 
        }

布局:

<div id="wrap" class="flex-wrap flex-vertical">
        <header id="header">
            <ul>
                <li class="border-b active" >Tab1</li>
                <li class="border-b" >Tab2</li>
                <li class="border-b" >Tab3</li>
                <li class="border-b" >Tab4</li>
                <li class="border-b" >Tab5</li>
            </ul>
        </header>
        <div id="main" class="flex-con"></div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap" >
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >Tab1</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >Tab2</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >Tab3</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >Tab4</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >Tab5</li>
            </ul>
        </div>
    </div>

$api.fixTabBar($api.byId('footer'));//适配IPhone X footer的问题

js：

function funIniGroup(){
        frames = [];
        // 创建frame
        for (var i = 0,len = 5; i < len; i++) {
            frames.push( { 
                name: 'frame'+i, 
                url: '../html/frame'+i+'.html', 
                bounces:true
            } )
        }
        //scrollEnabled为true时可滚动，就像ViewPager效果
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0, 
                y: $api.dom('header').offsetHeight, 
                w: api.winWidth, 
                h: api.winHeight - $api.dom('#header').offsetHeight - $api.dom('#footer').offsetHeight
            },
            index: 0,
            frames: frames,
            preload: frames.length
        }, function (ret, err) {
            //如果需要实现滚动的效果，这里也要动态的控制header和footer的样式
            if (ret) {
                changeTabClass(ret.index);
            }
        });
    }

    //点击Tab切换时改变头部和自身的样式
    function randomSwitchBtn(tag) {
        if (tag == $api.dom('#footer li.active')) return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0; i < eFootLis.length; i++) {
            if (tag == eFootLis[i]) {
                index = i;
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls(eFootLis[index], 'active');
        $api.addCls(eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
            reload: true //强制页面刷新（默认不刷新）
        });
        //或者也可以通过发送事件去实现点击每个Tab选项的时候都去强制页面刷新一下
        api.sendEvent({
            name: 'refresh' + index
        });
    }

    //左右滚动Tab时，改变头部和Tab选项的样式
    function changeTabClass(position) {
        if (position == $api.dom('#footer li.active')) return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0; i < eFootLis.length; i++) {
            if (position == i) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
    }

css下载地址：https://download.csdn.net/download/androidstudioo/10325669