用面向對象實現(xiàn)Tab選項卡

• 面向對象是一種思想,從面向過程到面向對象的轉變需要一個過程

HTML結構

<div class="tab">
    <ul class="tab-top" id="tab_top">
        <li class="current">公告</li>
        <li>規(guī)則</li>
        <li>論壇</li>
        <li>公益</li>
        <li>安全</li>
    </ul>
    <div class="tab-bottom" id="tab_bottom">
        <div class="tab-content selected">
            <ul>
                <li>
                    <a href="#">數(shù)據七夕:金牛愛送玫瑰</a>
                </li>
                <li>
                    <a href="#">阿里打造"互聯(lián)網監(jiān)管"</a>
                </li>
                <li>
                    <a href="#">10萬家店60萬新品</a>
                </li>
                <li>
                    <a href="#">全球最大網上時裝周</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">“全額返現(xiàn)”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘寶新規(guī)發(fā)布匯總(7月)</a>
                </li>
                <li>
                    <a href="#">炒信規(guī)則調整意見反饋</a>
                </li>
                <li>
                    <a href="#">質量相關規(guī)則近期變更</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">阿里建商家全鏈路服務</a>
                </li>
                <li>
                    <a href="#">個性化的消費時代來臨</a>
                </li>
                <li>
                    <a href="#">跨境貿易是中小企業(yè)機</a>
                </li>
                <li>
                    <a href="#">美妝行業(yè)虛假信息管控</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 監(jiān)聽事件
                this.bindEvent();
            },


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


            // 3. 監(jiān)聽
            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選項卡