注意事项

1、给li元素注册事件，函数里面的this指的li元素，那么我们可以在注册事件之前将Tab对象用that=this进行保存

2、使用沙箱模式，所以暴露给外面的变量使用的是window.tab，将window作为参数传递进去

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .clearfix:after {

            content: '';

            visibility: hidden;

            display: block;

            clear: both;

        }

        .container {

            width: 800px;

            margin: 120px auto;

        }

        .tab {

            line-height: 40px;

        }

        .tab ul {

            width: 500px;

            list-style: none;

            border-top: 1px solid gray;

            border-left: 1px solid gray;

            border-right: 1px solid gray;

        }

        .tab ul li {

            float: left;

            width: 100px;

            height: 40px;

            text-align: center;

            position: relative;

        }

        .tab ul li:after {

            content: '';

            display: block;

            width: 1px;

            height: 14px;

            border-right: 1px solid gray;

            position: absolute;

            top: 13px;

            right: 0;

        }

        .tab ul li:nth-child(5):after {

            visibility: hidden;

        }

        .tab ul li.current {

            color: red;

        }

        .tab ul li.other {

            color: black;

        }

        .main {

            height: 500px;

            border: 1px solid gray;

        }

        .main div {

            height: 500px;

            text-align: center;

            line-height: 500px;

            font-size: 60px;

            display: none;

        }

        .main div.current {

            display: block;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="tab">

        <ul class="clearfix" id="tab-menu">

            <li class="current">童装</li>

            <li>男装</li>

            <li>女装</li>

            <li>冬天</li>

            <li>夏天</li>

        </ul>

    </div>

    <div class="main" id="tab-main">

        <div class="current">童装</div>

        <div>男装</div>

        <div>女装</div>

        <div>冬天</div>

        <div>夏天</div>

    </div>

</div>

<script>

    (function (w) {

        function Tab(config) {

            this.tabMenus = null;

            this.tabMains = null;

            if (config) {

                this._init(config)

            }

        }

        Tab.prototype = {

            constructor: Tab,

            //初始化工作

            _init: function (config) {

                this.initElements(config);

                this.initEvent();

                if (config.auto) {

                    this.autoPlay();

                }

            },

            initEvent: function () {

                for (var i = 0; i < this.tabMenus.length; i++) {

                    var li = this.tabMenus[i];

                    li.index = i;

                    //that存储当前对象也就Tab创建出来的对象

                    var that = this;

                    li.onclick = function () {

                        //that还是只想Tab创建出来的对象

                        //this指的就是当前点击事件触发的这个li

                        that.change(this);

                    };

                }

            },

            initElements: function (config) {

                //根据config里的id

                //给当前对象的tabMenus和tabMains赋值

                var tabMenu = document.getElementById(config.tabMenu);

                var tabMain = document.getElementById(config.tabMain);

                this.tabMenus = tabMenu.children;

                this.tabMains = tabMain.children;

            },

            change: function (tabMenu) {

                //1.让所有的li变暗

                for (var i = 0; i < this.tabMenus.length; i++) {

                    this.tabMenus[i].className = "other";

                    //3.让所有div隐藏

                    this.tabMains[i].style.display = "none";

                }

                //2.让当前的li变亮

                tabMenu.className = 'current';

                //4.对应的div显示

                this.tabMains[tabMenu.index].style.display = "block";

            },

            autoPlay: function () {

                var index = 0;

                var that = this;

                setInterval(function () {

                    index++;

                    if (index == that.tabMenus.length) {

                        index = 0;

                    }

                    that.change(that.tabMenus[index]);

                }, 2000);

            }

        }

        w.Tab = Tab;

    })(window);

    var tb = new Tab({

        tabMenu: "tab-menu",    // 指定tab栏菜单id

        tabMain: "tab-main",    // 指定tab栏内容id

        auto: true           // 是否自动播放

    });

</script>

</body>

</html>

JS高级——面向对象方式解决tab栏切换问题的更多相关文章

  1. JS高级——面向对象方式解决歌曲管理问题

    需要注意的问题: 1.其他模块若是使用构造函数MP3创建对象,唯一不同的就是他们传入的音乐库是不一样的,所以构造函数中存在一个songList属性,其他一样的就被添加到了构造函数的原型对象之中 2.原 ...

  2. 如何解决tab栏切换只发一次请求的问题

    用的antd的tab栏组件,发现切换tab栏只在componentDidMount里面发了一次请求,后来发现是缓存问题,于是用activeKey再次进行了判断,代码如下:

  3. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  4. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  7. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  8. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  9. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 最大公约数GCD

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入2个正整数A,B,求A与B的最大公约数. Input 2个数A,B,中间用空格隔开.(1<= A,B <= ...

  2. 分块试水--CODEVS4927 线段树练习5

    模板 #include<stdio.h> #include<algorithm> #include<string.h> #include<stdlib.h&g ...

  3. 关于使用CELERY的一点心得

    使用也有大半年了.稳定性没话说啊. 但有一个坑,是我以前没注意的,记录下来. 就是本来一个任务是可以异步并行执行的..但如何需要CELERY的执行结果来作判断的话,就会变得异步串行的. 这要值得注意. ...

  4. [bzoj1507][Usaco2009 Hol]Transmission Delay 传输谍延时_动态规划

    Transmission Delay 传输谍延时 bzoj-1581 Usaco-2009 Hol 题目大意:题目链接. 注释:略. 想法: 动态规划. 首先我们考虑从后往前dp.(最近好多题都是从后 ...

  5. Servlet通过JavaBean传值到JSP页面

    主要通过Attribute进行传递,主要代码如下: 赋值,并定义跳转的页面: request.setAttribute("user", user); request.getRequ ...

  6. Redis: Useful commands

    SELECT X - Select database (the X must be int) CONFIG GET databases - Get databases number INFO keys ...

  7. keil编译后生成的M51文件解析

    通过*.m51文件我们能够清楚的看到单片机存储器的使用情况,以及能够看到每一个变量包含局部变量的位置. 之前碰到一个问题,相同的程序,在small模式下编译后执行没问题,但在large模式下能够编译. ...

  8. Windows 由于无法验证发布者，windows阻止控件安装怎么办

    1 打开Internet选项   2 下载未签名的ACTIVEX控件-设为启动    

  9. 国际维修联合会IMA年度大会在瑞士圆满结束

    瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...

  10. codility MinAbsSum

    For a given array A of N integers and a sequence S of N integers from the set {−1, 1}, we define val ...