注意事项

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. J2EE 课件2

    1.JSP页面可由5种元素组合而成: ① 普通的HTML标记符: ② JSP标记,如指令标记.动作标记: ③ 变量和方法的声明: ④ Java程序片: ⑤ Java表达式 2.声明变量和方法 JSP页 ...

  2. Ubuntu 16.04设置开机启动应用程序

    在终端通过以下命令进行设置,Dash已经搜索不到Startup了: gnome-session-properties 或者直接在Dash中搜索:gnome-session

  3. 复习es6-let和const

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

  4. git SSL certificate problem: unable to get local issuer certificate

    cmd 命令行中输入  git config --global http.sslVerify false 之后再进行操作

  5. Display certain line(s) from a text file in Linux.

    Purpose: Display certain line or lines from a text file, such as : Display the 1000th line from file ...

  6. [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js

    Splitting a stream into multiple streams causes new subscriptions. You can think of new subscription ...

  7. Win7 无法安装Office source engine 足够的权限安装系统服务怎么办

    运行CMD,输入命令:sc delete ose 重试即可.

  8. Levenberg–Marquardt algorithm

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFubWVuZ3dlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. [Unity UGUI]ScrollRect效果大全

    UGUI各种优化效果 本文所实现的UGUI效果需求如下: - 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持Object ...

  10. 20170410 --- Linux备课资料 --- 压缩与解压缩

    这节课我们来学习一下压缩与解压缩,那什么是压缩与解压缩呢? 联想一下Windows系统: 选中文件,右键选择即可 如果压缩,可以选择要压缩的格式,而解压缩直接选择就可以完成了 Linux是通过命令的方 ...