17 - Tab选项卡-面向对象

---

用面向对象实现Tab选项卡

• 面向对象是一种思想,从面向过程到面向对象的转变需要一个过程

HTML结构

<div class="tab">
    <ul class="tab-top" id="tab_top">
        <li class="current">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>公益</li>
        <li>安全</li>
    </ul>
    <div class="tab-bottom" id="tab_bottom">
        <div class="tab-content selected">
            <ul>
                <li>
                    <a href="#">数据七夕:金牛爱送玫瑰</a>
                </li>
                <li>
                    <a href="#">阿里打造"互联网监管"</a>
                </li>
                <li>
                    <a href="#">10万家店60万新品</a>
                </li>
                <li>
                    <a href="#">全球最大网上时装周</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">“全额返现”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘宝新规发布汇总(7月)</a>
                </li>
                <li>
                    <a href="#">炒信规则调整意见反馈</a>
                </li>
                <li>
                    <a href="#">质量相关规则近期变更</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">阿里建商家全链路服务</a>
                </li>
                <li>
                    <a href="#">个性化的消费时代来临</a>
                </li>
                <li>
                    <a href="#">跨境贸易是中小企业机</a>
                </li>
                <li>
                    <a href="#">美妆行业虚假信息管控</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">接次文件，毁了一家店</a>
                </li>
                <li>
                    <a href="#">账号安全神器阿里钱盾</a>
                </li>
                <li>
                    <a href="#">新版阿里110上线了</a>
                </li>
                <li>
                    <a href="#">卖家学违禁避免被处罚</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">为了公益high起来</a>
                </li>
                <li>
                    <a href="#">魔豆妈妈在线申请</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Css样式

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        .tab {
            width: 498px;
            height: 130px;
            border: 1px solid #999;
            margin: 100px auto;
            overflow: hidden;
        }

        .tab .tab-top {
            width: 501px;
            height: 33px;
            background: #eee;
            position: relative;
            left: -1px;
        }

        .tab .tab-top li {
            float: left;
            width: 98px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            cursor: pointer;
            border-bottom: 1px solid #999;
            padding: 0 1px;
        }

        .tab .tab-top li.current {
            background: #fff;
            border-bottom: 0;
            border-left: 1px solid #9d9d9d;
            border-right: 1px solid #9d9d9d;
            padding: 0;
        }

        .tab .tab-top li:hover {
            font-weight: 700;
            color: #f40;
        }

        .tab-bottom .tab-content {
            display: none;
        }

        .tab-bottom .tab-content a {
            text-decoration: none;
            color: #000;
        }

        .tab-bottom .tab-content a:hover {
            color: #f40;
        }

        .tab-bottom .tab-content ul li {
            margin-top: 20px;
            width: 220px;
            float: left;
            text-align: center;
        }

        .tab-bottom .selected {
            display: block;
        }
</style>

Js代码

<script>
    function $(id) {
        return document.getElementById(id);
    }

    window.onload = function () {

        function TabFn() {

            // 获得属性
            this.topLis = $('tab_top').getElementsByTagName('li');
            this.tabContent = $('tab_bottom').getElementsByClassName('tab-content');
        }

        TabFn.prototype = {

            // 1. 初始化方法
            init: function () {

                // 1.1 设置索引
                this.setIndex();

                // 1.2 监听事件
                this.bindEvent();
            },


            // 2. 索引
            setIndex: function () {
                for (var i = 0; i < this.topLis.length; i++) {
                    var li = this.topLis[i];
                    li.index = i;
                }
            },


            // 3. 监听
            bindEvent: function () {
                for (var i = 0; i < this.topLis.length; i++) {
                    var self = this;
                    this.topLis[i].onmouseover = function () {
                        self.handler(this);
                    }
                }
            },


            // 4. 排他
            handler: function (that) {
                for (var j = 0; j < this.topLis.length; j++) {
                    this.topLis[j].className = ''
                    this.tabContent[j].style.display = 'none';
                }
                that.className = 'current';
                this.tabContent[that.index].style.display = 'block';
            }
        }


        // 5. 实例化对象
        var tab = new TabFn();
        tab.init();
    }
</script>

特效展示

Tab选项卡