注意事项

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. 仪仗队（codevs 2296）

    题目描述 Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来 ...

  2. Ubuntu 16.04通过Unity Tweak Tool实现点击图标最小化

    1.通过Ubuntu软件中心安装Unity Tweak Tool 2.设置

  3. JSP计数器

    1.JSP弥补了servlet页面显示的不足:jsp运行时候需要转化为servlet,本质上就是servlet:tomcat下的work目录下有jsp的servlet和对应的class文件;下次再调用 ...

  4. 项目中应用到的框架和技术之二——ol3-ext

    ol3-ext有很多很丰富的效果,可以不用重复造轮子,ol3-ext示例大全:http://viglino.github.io/ol3-ext/ 在本次项目中使用到了ol3-ext的两个功能:图层管理 ...

  5. ZOJ 3868 GCD Expectation (容斥＋莫比乌斯反演)

    GCD Expectation Time Limit: 4 Seconds     Memory Limit: 262144 KB Edward has a set of n integers {a1 ...

  6. 1. PermCheck 桃花顺检验 Check whether array A is a permutation.

    package com.code; import java.util.Arrays; public class Test04_2 { public static int solution(int[] ...

  7. Windows编程中char*转LPCWSTR解决的方法总结

    Windows编程中常常涉及到的一个问题是字符串之间的转换,开发过程总是遇到编译器提示无法格式转换的问题.于是自己总结了几种解决的方法. 1.通过T2W转换宏 char* szStr = " ...

  8. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  9. 树的遍历 迭代算法——思路：初始化stack，pop stack利用pop的node，push new node to stack，可以考虑迭代一颗树 因为后序遍历最后还要要访问根结点一次，所以要访问根结点两次是难点

    144. Binary Tree Preorder Traversal Given a binary tree, return the preorder traversal of its nodes' ...

  10. [Swift通天遁地]七、数据与安全-(6)管理文件夹和创建并操作文件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...