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

    2018-08-02 21:57:13
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="...tab-JQ</title> <style> * { margin:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>tab-JQ</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            #wrap {
                width: 600px;
                margin: 100px auto 0;
                overflow: hidden;
            }
    
            #tit {
                height: 30px;
                width: 600px;
            }
    
            #tit span {
                float: left;
                height: 30px;
                line-height: 30px;
                width: 200px;
                font-size: 20px;
                text-align: center;
                color: #ccc;
                background: green;
            }
    
            #con li {
                display: none;
                height: 200px;
                width: 600px;
                background: pink;
                font-size: 100px;
                line-height: 200px;
                text-align: center;
            }
    
            #tit span.select {
                background: red;
                color: #ccc;
            }
    
            #con li.show {
                display: block;
            }
        </style>
        <script src='jquery-1.11.1.min.js'></script>
    </head>
    
    <body>
        <div id="wrap">
            <div id="tit">
                <span class="select">标题1</span>
                <span>标题2</span>
                <span>标题3</span>
            </div>
            <ul id="con">
                <li class="show">内容111</li>
                <li>内容222</li>
                <li>内容333</li>
            </ul>
        </div>
        <script>
            $('#tit span').click(function () {
                var i = $(this).index();//下标第一种写法
                //var i = $('tit').index(this);//下标第二种写法
                $(this).addClass('select').siblings().removeClass('select');
                $('#con li').eq(i).show().siblings().hide();
            });
        </script>
    </body>
    
    </html>

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

    展开全文
  • tab切换页面,是用很简单的js写的,可以多次使用。适用于PC和APP。
  • jquery tab 切换页面 支持iframe

    热门讨论 2011-11-12 14:57:01
    jquery tab 切换页面 支持iframe 有iframe引用示例
  • 04 ionic新增tab切换页面 去掉二级页面tabs菜单,修改返回按钮-avi.rar
  • 介绍: 紫色背景的登陆注册页面,带第三方按钮的登陆注册tab切换页面模板。 网盘下载地址: http://kekewl.org/iTxQRHz3BGH 图片:

    介绍:

    紫色背景的登陆注册页面,带第三方按钮的登陆注册tab切换页面模板。


    网盘下载地址:

    http://kekewl.org/iTxQRHz3BGH


    图片:


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

    展开全文
  • html实现类似android的tab切换页面

    千次阅读 2015-06-09 10:48:23
    根据隐藏,显示的方法,写了一个类似androidtab切换页面的例子,个人也不清楚这样做合不合理,写此篇文章一个是希望对新手童鞋有个启发,同时也希望知道怎么实现合 理的大大给我留言,让我能学习到更靠谱的方法(我...
  • 项目开发过程中遇到一个bug,tab切换页面,某一块会莫名其妙消失不显示,控制台报错 vue cannot read property ‘length’ of null。查阅了资料说可能是因为数据加载需要一段时间,此时渲染数据找不到数据length报错...
  • 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: ...
  • React tab切换页面

    千次阅读 2018-12-05 14:34:12
    <li className={"m-sys-tab " + (tabActiveIndex === 0 ? 'active': '')} onClick={this.handleTabClick.bind(this, 0)}> <Icon type="tuandui" className="m-sys-tab-icon"/> ...
  • Tablyout 点击tab切换页面闪烁

    千次阅读 2016-04-24 18:42:35
    最近在做一个项目,使用5.0自带的TabLayout做导航栏,实现ViewPager+Fragment页面切换,后面发现从第一个tab直接切换到最后一个tab 的时候页面切换闪烁,网上查了一下,需要监听tabLayout的...
  • Flutter实现Tab切换页面

    千次阅读 2019-04-01 23:04:59
    先看效果图 实现过程分析 首先自定义一个TabBarWidget ... class TabBarWidget extends ... static const int BOTTOM_TAB = 1; //顶部模式 static const int TOP_TAB = 2; final int type; //标题...
  • wxpython tab切换页面

    2017-03-09 10:42:00
    最近没事学习下wxpython,发现很少有关于页面切换的demo,这边分享下2中切换的方法。第一种:利用wx.Notebook第二种:利用Sizer布局实现(自己写的),代码没有涉及到什么重构之类的优化,只是说下本人的思想方法,希望...
  • 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul li { list-style: none; display: inline-block; border: 1px solid ...
  • Flutter tab切换页面防止重置

    千次阅读 2019-03-04 15:09:00
    问题描述:TabBar 配合TabBarView切换页面,然后每个页面是一个listview加载数据,但是切换页面后listview的数据会被重置, 重新被加载了,解决办法使用 withAutomaticKeepAliveClientMixin实现@protected bool get...
  • flutter tab切换页面防止重置

    千次阅读 2018-07-27 17:19:21
    问题描述:TabBar 配合TabBarView切换页面,然后每个页面是一个listview加载数据,但是切换页面后listview的数据会被重置, 重新被加载了,解决办法使用 with AutomaticKeepAliveClientMixin 实现 @protected ...
  • }, /** * 判断滑动距离和时间是否需要切换页面 */ touchMove(event) { //滑动结束记录坐标和时间 touchDot.X = event.touches[0].pageX; touchDot.Y = event.touches[0].pageY; //向左滑处理 if ((startDot.X - ...
  • 方式一 :var navtab; var selectTabPage = function(tabid) { // var navtab = $("#tab").ligerGetTabManager(); var content = navtab.tab.co...
  • 我的app做完刚进去的时候底部导航栏的tab切换是正常的,但是退出之后重新登录,我在首页用reload进行了刷新,之后就引发了一些问题,tab切换有时候会失灵,登录转态的改变不成功。原来是reload的时候只是index里面的...
  • 闲来无事,总结下一个经常用到的tab切换的功能。 先上图: 这个是利用的RadioGroup和radiobutton实现点击切换tab功能,废话不说了,上代码吧! ...
  • Win10下安装必应输入法能导致Alt+Tab切换页面时不能置于最前> 今天兴致勃勃地安装了微软的必应输入法,结果电脑竟不能使用win10中的部分快捷键,较为明显的是Alt+Tab切换页面不能置于窗口最前,只能把其他窗口都置于...
  • tab切换页面备份

    2014-01-04 11:26:34
    --切换 --> $(function(){  $(".bar a:first").addClass("current3")// $(".bar li").css("left",function(i){return i})// $(".content ul:eq(0)").show() $(".bar a").click(function(){  $...

空空如也

空空如也

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

tab切换页面