注意事项

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. 复习es6-let和const

    1.声明变量的方法 es5 : var   function es6 : var   function   let    const   class 2.let(const)与var 不同 let不能 ...

  2. MAPZONE GIS SDK接入Openlayers3之二——空间参考扩展

    Openlayers默认了两种空间参考,一个是EPSG4326,一个是EPSG3857,其它的空间参考需要进行扩展才能使用.所以我们初始化时进行了如下操作: 1.将配置数据库中所有的空间参考读取出来, ...

  3. 阿牛的EOF牛肉串-记忆化搜索或动态规划

    C - 阿牛的EOF牛肉串 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  4. android高速开发框架xUtils

    xUtils简单介绍 xUtils 包括了非常多有用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词).拥有更加灵活的ORM,很多其它的事件注解支持且不受 ...

  5. AUTOTRACE

    .sqlplus 设置参数 set atuotrace on SET AUTOTRACE OFF --No AUTOTRACE report is generated. This is the def ...

  6. Project Euler：Problem 42 Coded triangle numbers

    The nth term of the sequence of triangle numbers is given by, tn = ½n(n+1); so the first ten triangl ...

  7. JPA学习笔记（13）——查询缓存

    使用hibernate的查询缓存 运行下面代码: String jpql = "FROM User u WHERE u.id = ?"; Query query = entityM ...

  8. ios3--UIView的常见方法

    // // ViewController.m // 07-UIView的常见方法 // #import "ViewController.h" @interface ViewCont ...

  9. bzoj 1935 Tree 园丁的烦恼

    题目大意: 一些点,每次查询一个矩形内有多少个点 思路: 因为空间太大 所以不能用什么二维树状数组 需要把这些点和所有查询的矩阵的左下和右上离线下来 先离散化 然后每个子矩阵像二维前缀和那样查询 按照 ...

  10. 【POJ 1845】 Sumdiv

    [题目链接] 点击打开链接 [算法] 不妨先将A分解质因数 A = p1^q1p2^p2p3^p3..pn^qn 那么,A^B = p1^q1Bp2^q2B...pn^qnB 根据约数和定理,A^B的 ...