注意事项

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. SpringBoot @ConditionalOnBean、@ConditionalOnMissingBean注解源码分析与示例

    前言: Spring4推出了@Conditional注解,方便程序根据当前环境或者容器情况来动态注入bean,对@Conditional注解不熟悉的朋友可移步至 Spring @Conditional ...

  2. codevs3411 洪水

    题目描述 Description 小浣熊松松和朋友到野外露营,没想到遇上了π年一次的大洪水,好在松松是一只爱观察的小浣熊,他发现露营地的地形和洪水有如下性质: ①露营地可以被看做是一个N*M的矩形方阵 ...

  3. Spring技术内幕：Spring AOP的实现原理（五）

    7.Advice通知的实现 AopProxy代理对象生成时,其拦截器也一并生成.以下我们来分析下Aop是怎样对目标对象进行增强的.在为AopProxy配置拦截器的实现中,有一个取得拦截器配置过程,这个 ...

  4. 异常：”未处理System.TypeLoadException“

    1.问题由来:     在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...

  5. POJ-3268-最短路(dijkstra算法)

    Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12494   Accepted: 5568 ...

  6. LeetCode 551. Student Attendance Record I (学生出勤纪录 I)

    You are given a string representing an attendance record for a student. The record only contains the ...

  7. poj 1741 楼教主男人八题之中的一个：树分治

    http://poj.org/problem? id=1741 Description Give a tree with n vertices,each edge has a length(posit ...

  8. jQuery 自定义动画效果

    <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...

  9. linux设备驱动模型之Kobject、kobj_type、kset【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74838165 版权声明:本文为博主原创文章,转载请注明http://blog.c ...

  10. JavaScript Patterns 2.6 switch Pattern

    Principle • Aligning each case with switch(an exception to the curly braces indentation rule). • Ind ...