精华内容
下载资源
问答
  • 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鸡板砖工)请忽略,谢谢!~~!

    展开全文
  • 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){ ...
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.tabs{
    				width: 400px;
    				text-align: center;
    				margin: 30px auto;
    				border: 1px solid #C0DCC0;
    				background-color: #FFF;
    				box-sizing: border-box;
    			}
    			.tabs nav{
    				height: 40px;
    				text-align: center;
    				line-height: 40px;
    				overflow: hidden;
    				background-color: #C0DCC0;
    				display: block;
    				
    			}
    			nav{
    				font-size: 20px;
    				margin: 30x auto;
    			}
    			nav a{
    				text-decoration: none;		
    			}
    		
    			nav a.active{
    				background-color: #FFC0CB;
    			}
    			.cont{
    				overflow: hidden;
    				display: none;
    			}
    			.cont ul{
    				line-height: 30px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="tabs">
    			<nav>
    				<a href="javascript:;" data-cont="local">国内新闻</a>
    				<a href="javascript:;" data-cont="global">国际新闻</a>
    				<a href="javascript:;" data-cont="sports">体育新闻</a>
    				<a href="javascript:;" data-cont="funny">娱乐新闻</a>
    			</nav>
    			
    			<section class="cont" id="local">
    				<ul>
    					<li>国内新闻</li>
    					<li>国内新闻</li>
    				</ul>
    			</section>
    			<section class="cont" id="global">
    				<ul>
    					<li>国际新闻</li>
    					<li>国际新闻</li>
    				</ul>
    			</section>
    			<section class="cont" id="sports">
    				<ul>
    					<li>体育新闻fvvffcvvfc</li>
    					<li>体育新闻fvfgdcfvgfvcg</li>
    				</ul>
    			</section>
    			<section class="cont" id=funny>
    				<ul>
    					<li>娱乐新闻</li>
    					<li>娱乐新闻</li>
    				</ul>
    			</section>
    		</div>
    		
    		<script>
    			//默认显示一个当前的样式,点击导航实现切换
    			function tabs(key){
    				var navs=document.querySelectorAll('nav a');
    				//遍历给导航绑定样式,并且添加样式
    				for(var i=0;i<navs.length;i++){
    					if(key==i){
    						navs[i].classList.add('active');
    						//拿到Id
    						var secId=navs[i].dataset['cont'];
    						//获取对应标签
    						document.querySelector('#'+secId).style.display='block';
    					}
    					//绑定点击事件
    					navs[i].function(){
    						var currentNav=document.querySelector('.active');
    						var currentId=currentNav.dataset['cont'];
    						currentNav.classList.remove('active');
    						document.querySelector('#'+currentId).style.display='none';
    						
    						this.classList.add('active');
    						var myId=this.dataset['cont'];
    						document.querySelector('#'+myId).style.display='block';
    						
    					}
    				}
    			}
    			tabs(2);
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • CSS3代码实现的tab标签切换*{padding:0px;margin:0px;}#tab{margin:20px;20px;position:relative;}ul{list-style:none;}ul li{float:left;}ul li a{background:#f90;color:#fff;font-weight:500;height:30px;line-...
  • $('.tab-ul li').on('click', function() { $('.tab-ul li').removeClass('active'); $(this).addClass('active'); var liLeft = $(this).offset().left; var liWidth = $(this).width()/2; var widths = ...
  • 需求:展示页面包含:广告位,tab切换,内容展示,需要向上滑动的时候,广告位隐藏,tab吸顶展示,内容区域正常滑动;下拉刷新后,广告位显示,tab取消吸顶。 页面:
  • 单纯的写个tab切换图表,是这样显示的。。。 很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。 但是,只要我们在切换的时候调用一下被使用的函数,图表就会完整显示。 代码展示: HTML &lt;div ...
  • jquery tab切换

    2017-10-27 13:59:29
    快速的tab,切换,简单易用,可以用作pc,移动端,都可以共用
  • 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...
  • 本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下实现tab切换的主要html代码:导航菜单TAB...ajax载入 tab标签,jquery ajax载入数据库的内容实现tab切换的jquery代码:$(document)....
  • 这篇文章给大家介绍的内容是关于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 左右滑动切换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切换 $ ( '.tabsNav li' ). on ( 'click' , function ( ) { var $ this = $ ( this ) ; curIndex = $ this . index () ; $ this . addClass ( 'cur' ). siblings ( 'li' ). removeClass ( '...
  • JS原生Tab切换

    2019-11-29 19:35:16
    因为在最近的Asp.net项目中使用到前端中的Tab切换,因这两种方法在Asp.net中的使用的差异,导致走了不少弯路,特下这篇分享,记录下自己解决这个问题的心路历程。 JS 原生的写法: 使用前端的Tab切换有两种方法...
  • vue 锚点定位 tab切换

    千次阅读 2020-07-20 10:26:06
    我们这想要实现tab切换时候页面自动滚动定位到锚点位置,因为这个是单页面引用,也没有使用a标签等,使用的是最普通的方法,仅供大家参考。 //要实现切换的三个tab项 <div class="con_nav"> <span @click=...
  • 本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考,具体如下:效果图如下:完整实例...www.jb51.net JS实现的TAB切换#content {width: 400px;height: 200px;}#tab_bar {width: 400px;height: 20px;float...
  • H5新增标签 1、结构标签 标签 描述 section 独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分 article 特殊独立区块,表示这篇页眉中的核心...
  • tab切换之图片切换

    2021-06-15 18:03:35
    当鼠标点击时,图片切换为高亮图 实现: <template> <div class="my-tab"> <div class="tab-item" @click=" () => { tabClick(item, index); } " v-for="(item, index) in tabList" :...
  • 问题:vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件 loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值) 这是我的页面 created () { this.getDataList('...
  • tab切换

    2019-09-24 10:41:48
    1.tab切换页,javascrip版本 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>4.21节,Tab选项卡切换</title> <meta ...

空空如也

空空如也

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

h5tab切换