html实现重叠横向tap页,HTML5 tab切换页面功能实现

html5 tab切换页面功能实现

h5 tab切换页面

html{margin: 0; padding: 0;}

body{margin: 0 auto; padding: 0;max-width: 1000px; background: #f5f6f8;font-size: 14px;}

.m-header{position: relative; height: 0.48rem;line-height: 0.48rem; font-size:0.16rem;border-bottom:1px solid #ebebeb; text-align: center;color: #2c2c2c;letter-spacing: 0;background: #fff;}

.m-return {position: absolute;display: inline-block;top:0.13rem;left: 0.12rem;width: 0.14rem; height: 0.22rem; background-image: url(https://c2.cgyouxi.com/website/mobile/img/arrow-l.png?v=20180122);background-size: 100% 100%;}

.m-tab{position: relative;padding: 0.40rem 0 0; width: 100%;background: #fff;}

.m-tab a{position: absolute; display: inline-block;width: 50%; font-size: 0.14rem;color: #2c2c2c;letter-spacing: 0;line-height: 0.38rem;text-align: center;text-decoration: none;}

.m-tab a:first-child{top: 0;left: 0; }

.m-tab a.m-coupons{top:0; ri