欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

HTML5 tab切换页面功能实现