精华内容
下载资源
问答
  • H5 tab切换页面

    万次阅读 2018-02-11 18:42:01
    <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: ...
    <!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(http://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-division{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>  
      <div class="m-header" id="m-header">
      <div class="m-return" id="m-return"></div>
      我的活动
      </div>
      <div 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>
        <div class="m-division"></div>  
      </div>  
      <div id="m-view1" class="m-view1">
        1
      </div>
      <div id="m-view2" class="m-view2" style="display: none;"> 
        2
      </div>  
      <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>

     

     

     

    备注:欢迎加入web前端求职招聘qq群:668352707

    展开全文
  • 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...

    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; 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;

    }

    }

    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);

    我的活动

    我邀请的好友

    我的赠送券

    1

    2

    $('#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();

    });

    16044_0.jpg

    展开全文
  • H5页面两层tab切换嵌套 最近经朋友介绍接了个外包页面就一个简单的H5引流页面,布局就一个两层嵌套的tab切换。 效果如图: 直接上代码 css: <style type="text/css"> * { margin: 0; padding: 0; } ....

    H5页面两层tab切换嵌套

    最近经朋友介绍接了个外包页面就一个简单的H5引流页面,布局就一个两层嵌套的tab切换。

    效果如图:

    在这里插入图片描述

    直接上代码

    css:

    <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        .clearfix:after {
          content: "";
          display: block;
          visibility: hidden;
          height: 0;
          clear: both;
        }
        .clearfix {
          zoom: 1;
        }
        html {
          font-size: 100px;
        }
        body {
          min-width: 300px;
          max-width: 750px;
          margin: 0 auto;
          background: #fff;
          font-family: Arial, 'PingFang SC', 'Microsoft YaHei', Tahoma, 'sans-serif';
        }
        .main {
          width: 100%;
        }
        .btn {
          width: 100%;
          height: 1.2rem;
          display: flex;
          justify-content: space-between;
        }
        .spanList {
          font-size: 0.36rem;
          color: #3f3f3f;
          text-align: center;
          line-height: 1.2rem;
          display: inline-block;
          position: relative;
          letter-spacing: 0.005rem;
          font-weight: 400;
          width: 33.333333%;
        }
        .active {
          color: #3f3f3f;
          text-align: center;
          line-height: 1.2rem;
          letter-spacing: 0.005rem;
          display: inline-block;
          background: #ccc;
          font-weight: 700;
        }
        .context {
          width: 100%;
          float: left;
        }
        .con {
          display: none;
          width: 7.5rem;
        }
        ul {
          width: 7.5rem;
          height: 1.5rem;
          background: #ccc;
          display: flex;
          flex-flow: wrap;
          justify-content: space-between;
        }
        li {
          text-align: center;
          width: 1.8rem;
          display: block;
          list-style: none;
          cursor: pointer;
          height: 0.6rem;
          line-height: 0.6rem;
          background: pink;
          font-size: 0.4rem;
          text-align: center;
        }
        .choice {
          background: #409EFF;
          color: #fff;
        }
        .tab-item {
          display: none;
          font-size: 0.8rem;
        }
        .show {
          display: block;
        }
      </style>
    

    html:

    <div class="main">
        <div class="btn">
          <!-- Tab标题 -->
          <span class="active spanList">课程介绍</span>
          <span class="spanList">用户故事</span>
          <span class="spanList">常见问题</span>
        </div>
        <div class="context">
          <!-- Tab内容 -->
          <div class="con">
            <ul class="clearfix">
              <li tabid="1" class="choice">tab1</li>
              <li tabid="2">tab2</li>
              <li tabid="3">tab3</li>
              <li tabid="4">tab4</li>
              <li tabid="5">tab5</li>
              <li tabid="6">tab6</li>
              <li tabid="7">tab7</li>
            </ul>
            <div id="box">
              <div class="tab-item show">课程介绍Tab-item1</div>
              <div class="tab-item">课程介绍Tab-item2</div>
              <div class="tab-item">课程介绍Tab-item3</div>
              <div class="tab-item">课程介绍Tab-item4</div>
              <div class="tab-item">课程介绍Tab-item5</div>
              <div class="tab-item">课程介绍Tab-item6</div>
              <div class="tab-item">课程介绍Tab-item7</div>
            </div>
          </div>
          
          <div class="con">
            <ul class="clearfix">
              <li tabid="1" class="choice">tab1</li>
              <li tabid="2">tab2</li>
              <li tabid="3">tab3</li>
              <li tabid="4">tab4</li>
              <li tabid="5">tab5</li>
              <li tabid="6">tab6</li>
              <li tabid="7">tab7</li>
            </ul>
            <div id="box">
              <div class="tab-item show">用户故事Tab-item1</div>
              <div class="tab-item">用户故事Tab-item2</div>
              <div class="tab-item">用户故事Tab-item3</div>
              <div class="tab-item">用户故事Tab-item4</div>
              <div class="tab-item">用户故事Tab-item5</div>
              <div class="tab-item">用户故事Tab-item6</div>
              <div class="tab-item">用户故事Tab-item7</div>
            </div>
          </div>
          
          <div class="con">
            <ul class="clearfix">
              <li tabid="1" class="choice">tab1</li>
              <li tabid="2">tab2</li>
              <li tabid="3">tab3</li>
              <li tabid="4">tab4</li>
              <li tabid="5">tab5</li>
              <li tabid="6">tab6</li>
              <li tabid="7">tab7</li>
            </ul>
            <div id="box">
              <div class="tab-item show">常见问题Tab-item1</div>
              <div class="tab-item">常见问题Tab-item2</div>
              <div class="tab-item">常见问题Tab-item3</div>
              <div class="tab-item">常见问题Tab-item4</div>
              <div class="tab-item">常见问题Tab-item5</div>
              <div class="tab-item">常见问题Tab-item6</div>
              <div class="tab-item">常见问题Tab-item7</div>
            </div>
          </div>
        </div>
      </div>
    

    js:

    // rem换算
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
              } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
              }
            };
    
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    
        // tab 切换
        $(".con").eq(0).show();
        $(".btn span").click(function () {
          var num = $(".btn span").index(this);
          $(".con").hide();
          $(".con").eq(num).show();
          $(this).attr("class", "active spanList");
          $(this).siblings().attr("class", "spanList");
        })
        $(".con li").click(function () {
          // 修改tab标签样式
          $(this).attr("class", "choice")
          $(this).siblings().attr("class", "")
    
          // 获取tab ID
          var itemId = $(this).attr("tabid") - 1;
    
          // 切换到指定tab
          $(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").addClass("show");
          $(this).parents('.con').find("#box").find(".tab-item:eq(" + itemId + ")").siblings().removeClass("show");
    	});
    

    番外篇:
    最近在持续混吃等死的日子里,又双叒(ruò)叕(zhuó)间歇性踌躇满志发作了,就突发奇想决定把这么多年的做的一些东西整理出来发发CSDN,So如果对您有用希望点个赞,没营养(那是正常的就是个low鸡板砖工)请忽略,谢谢!~~!

    展开全文
  • 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...

    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; 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;

    }

    }

    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);

    我的活动

    我邀请的好友

    我的赠送券

    1

    2

    $('#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();

    });

    b3b6acd5c7c288bab9be6da2cbab4024.png

    展开全文
  • 供大家参考,具体内容如下实现tab切换的主要html代码:导航菜单TAB标签jquery css多级下拉菜单多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容各种tab标签选项卡tab标签页面,...
  • H5 导航栏Tab切换

    千次阅读 2019-03-28 18:08:41
    //默认显示一个当前的样式,点击导航实现切换 function tabs(key){ var navs=document.querySelectorAll('nav a'); //遍历给导航绑定样式,并且添加样式 for(var i=0;i;i++){ if(key==i){ ...
  • html实现类似android的tab切换页面

    千次阅读 2015-06-09 10:48:23
    根据隐藏,显示的方法,写了一个类似androidtab切换页面的例子,个人也不清楚这样做合不合理,写此篇文章一个是希望对新手童鞋有个启发,同时也希望知道怎么实现合 理的大大给我留言,让我能学习到更靠谱的方法(我...
  • jquery tab切换

    2017-10-27 13:59:29
    快速的tab,切换,简单易用,可以用作pc,移动端,都可以共用
  • 单纯的写个tab切换图表,是这样显示的。。。 很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。 但是,只要我们在切换的时候调用一下被使用的函数,图表就会完整显示。 代码展示: HTML &lt;div ...
  • h5 左右滑动切换tab

    千次阅读 2018-02-06 14:43:00
    1 on: { 2 touchstart(e){ 3 e.preventDefault(); 4 var touch = e.touches[0]; 5 startX = touch.pageX; ...
  • tab切换 页面中的焦点状态的改变

    千次阅读 2018-11-15 16:27:33
    例如我的登录页面 tab...现在我介绍一种css属性tabindex tabindex就可以实现tab切换顺序的需求 注意:以下元素支持 tabindex 属性:a, area, button, input, object, select 以及 textarea 具体例子可以查看w3schoo...
  • 这篇文章给大家介绍的内容是关于HTML5实现Tab切换(通过js代码),...javascript实现Tab切换*{padding:0px;margin:0px;}ul li {cursor:pointer;float:left;width:100px;height:30px;line-height:30px;text-align:cente...
  • H5移动端实现左右滑屏切换页面

    千次阅读 2020-01-09 18:40:56
    项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面,并且支持手势滑动,左滑右滑可以同点选tab一样切换页面。 根据项目中选用的ui组件cube-ui为基准查看了一下可实现的方案,比如可以直接...
  • vue 锚点定位 tab切换

    千次阅读 2020-07-20 10:26:06
    我们这想要实现tab切换时候页面自动滚动定位到锚点位置,因为这个是单页面引用,也没有使用a标签等,使用的是最普通的方法,仅供大家参考。 //要实现切换的三个tab项 <div class="con_nav"> <span @click=...
  • 以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很感谢西门的后花园作者。...
  • 在项目中经常用到标题tab选项卡,来切换不同的内容,但是每次刷新后,都会回到默认显示页,如果在其他页面执行操作后刷新,跑到默认页而不是当前页,就很恶心了。本例主要是是利用H5的,sessionStorage缓存,来记录...
  • html5 滑动页面切换tab

    2016-02-18 16:32:31
    html5 滑动页面切换tab,点击tab也可以切换,非常实用。
  • 问题:vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件 loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值) 这是我的页面 created () { this.getDataList('...
  • Tab切换页面自动刷新效果

    万次阅读 2017-12-04 11:15:03
    Tab切换页面自动刷新效果
  • NULL 博文链接:https://13813962825.iteye.com/blog/2067021
  • H5新增标签 1、结构标签 标签 描述 section 独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分 article 特殊独立区块,表示这篇页眉中的核心...
  • H5实战(二):Tab标签切换效果

    千次阅读 2017-09-11 16:57:41
    Tab标签切换效果的思路与实现 1.目标效果: 实现鼠标移到不同的tab标签上,下面对应的内容进行切换的效果,同时,被选中的选项卡有左右边框,无下边框,而未被选中的则存在下边框。 2.实现思路 1)点击选择的...
  • H5中自定义属性实现tab切换案例

    千次阅读 2018-04-17 01:21:54
    H5规范:data-* 属性以data-开头,其格式如下data-*=”xxx” &lt;div id="demo" data-myname="userName" data-age="10"&gt; Node.dataset是以对象形式存在的,当我们为同...
  • H5新增标签 1、结构标签 (1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分; (2)article:特殊独立区块,表示这篇页眉中的核心内容; (3)aside:标签...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,573
精华内容 1,429
关键字:

h5tab切换页面