实现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); 
		}

布局:

		

			

				
Tab1
				
Tab2
				
Tab3
				
Tab4
				
Tab5
			
		
		

		

			

				
Tab1
				
Tab2
				
Tab3
				
Tab4
				
Tab5
			
		
	

$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: 0
		}, 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
————————————————————————————————————————————————————
顶部Tab标签实现方式类似：