HTML5 tab切换页面功能实现
程序员文章站
2022-06-04 23:01:40
html5 tab切换页面功能实现
...
html5 tab切换页面功能实现
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>h5 tab切换页面</title> <style type="text/css"> 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; right:0;} .m-tab a.active{border-bottom: 2px solid #ffac28;} .m-pision{height: 1px; background:#ebebeb;} .m-view1{background: #fff;height: 200px;} .m-view2{background: #fff;height: 200px;} @media screen and (min-width: 360px) { html { font-size: 100px!important; } } </style> <script type="text/javascript"> document.documentelement.style.fontsize = document.documentelement.clientwidth / 3.6 + 'px'; (function (doc, win) { var docel = doc.documentelement; var resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) { return; } docel.style.fontsize = 100 * (clientwidth / 360) + 'px'; }; if (!doc.addeventlistener) { return; } win.addeventlistener(resizeevt, recalc, false); doc.addeventlistener('domcontentloaded', recalc, false); })(document, window); </script> </head> <body> <p class="m-header" id="m-header"> <p class="m-return" id="m-return"></p> 我的活动 </p> <p class="m-tab"> <a href="javascript:void(0);" id="m-my-invite" class="active">我邀请的好友</a> <a href="javascript:void(0);" id="m-my-coupons" class="m-coupons">我的赠送券</a> <p class="m-pision"></p> </p> <p id="m-view1" class="m-view1"> 1 </p> <p id="m-view2" class="m-view2" style="display: none;"> 2 </p> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $('#m-return').on('click', function() { window.history.back() }); var mycoupons = $('#m-my-coupons'); var myinvite = $('#m-my-invite'); var view1 = $('#m-view1'); var view2 = $('#m-view2'); $('#m-return').on('click', function() { window.history.back() }); myinvite.on('click', function() { mycoupons.removeclass('active'); myinvite.addclass('active'); view2.hide(); view1.show(); }); mycoupons.on('click', function() { myinvite.removeclass('active'); mycoupons.addclass('active'); view1.hide(); view2.show(); }); </script> </body> </html>