HTML5 tab切换页面功能实现
导读：收集整理的这篇文章主要介绍了html5教程-HTML5 tab切换页面功能实现，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5 tab切...
收集整理的这篇文章主要介绍了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教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 tab切换页面功能实现
本文地址： https://pptw.com/jishu/587137.html