html5
html5教程-HTML5 tab切换页面功能实现
发布时间：2018-12-12 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-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> 
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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 tab切换页面功能实现全部内容，希望文章能够帮你解决html5教程-HTML5 tab切换页面功能实现所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程