用面对对象方式定tab标签

一些公共的底层的JS方法

var GLOBAL = {};
        GLOBAL.namespace = function (str) {
            var arr = str.split('.'), o = GLOBAL;
            for (var i = (arr[0] == 'GLOBAL') ? 1 : 0; i < arr.length; i++) {
                o[arr[i]] = o[arr[i]] || {};
                o = o[arr[i]];
            }
        }
        GLOBAL.namespace('Dom');
        GLOBAL.Dom.getElementsByClassName = function (str, root, tag) {
            if (root) {
                root = typeof root == 'string' ? document.getElementById(root) : root;
            } else {
                root = document.body;
            }
            tag = tag || "*";
            var els = root.getElementsByTagName(tag), arr = [];
            for (var i = 0, n = els.length; i < n; i++) {
                for (var j = 0, k = els[i].className.split(' '), l = k.length; j < l; j++) {
                    if (k[j] == str) {
                        arr.push(els[i]);
                        break;
                    }
                }
            }
            return arr;
        }
        GLOBAL.Dom.addClass = function (node, str) {
            if (!new RegExp("(^|\s+)" + str).test(node.className)) {
                node.className = node.className + " " + str;
            }
        }
        GLOBAL.Dom.removeClass = function (node, str) {
            node.className = node.className.replace(new RegExp("(^|\s+)" + str), "");
        }
        GLOBAL.namespace('Event');
        GLOBAL.Event.on = function (node, eventType, handler, scope) {
            node = typeof node == 'string' ? document.getElementById(node) : node;
            scope = scope || node;
            if (document.all) {
                node.attachEvent('on' + eventType, function () {
                    handler.apply(scope, arguments);
                });
            } else {
                node.addEventListener(eventType, function () {
                    handler.apply(scope, arguments);
                }, false);
            }
        }

基础的HTML

<div class="J_tab">
        <div class="tab">
            <ul class="tab-menuWrapper">
                <li class="J_tab-menu">menu1</li>
                <li class="J_tab-menu">menu2</li>
                <li class="J_tab-menu">menu3</li>
            </ul>
            <div class="tab-contentWrapper">
                <div class="J_tab-content">
                    <div>content1</div>
                    <ul>abc</ul>
                </div>
                <div class="J_tab-content" style="display: none;">
                    <p>content2</p>
                </div>
                <div class="J_tab-content" style="display: none;">content3</div>
            </div>
        </div>
        <hr />
        <div class="tab">
            <ul class="tab-menuWrapper">
                <li class="J_tab-menu">menu1</li>
                <li class="J_tab-menu">menu2</li>
                <li class="J_tab-menu">menu3</li>
            </ul>
            <div class="tab-contentWrapper">
                <div class="J_tab-content">
                    <div>content1</div>
                    <ul>abc</ul>
                </div>
                <div class="J_tab-content" style="display: none;">
                    <p>content2</p>
                </div>
                <div class="J_tab-content" style="display: none;">content3</div>
            </div>
        </div>
        <hr />
        <div class="tab">
            <ul class="tab-menuWrapper">
                <li class="J_tab-menu">menu1</li>
                <li class="J_tab-menu">menu2</li>
                <li class="J_tab-menu">menu3</li>
            </ul>
            <div class="tab-contentWrapper">
                <div class="J_tab-content">
                    <div>content1</div>
                    <ul>abc</ul>
                </div>
                <div class="J_tab-content" style="display: none;">
                    <p>content2</p>
                </div>
                <div class="J_tab-content" style="display: none;">content3</div>
            </div>
        </div>
    </div>

一些基本的CSS

ul {
            padding: 0;
            margin: 0;
        }

        .tab {
            width: 400px;
        }

            .tab .tab-currentMenu {
                background-color: #333;
                color: #fff;
            }

            .tab .tab-currentMenu1 {
                background-color: blue;
                color: #fff;
            }

        .underline {
            text-decoration: underline;
        }

        .tab-menuWrapper {
            padding-left: 20px;
        }

            .tab-menuWrapper li {
                float: left;
                display: inline;
                padding: 5px;
                border: 1px solid #333;
                border-bottom: none;
                margin-right: 5px;
            }

        .tab-contentWrapper {
            border: 1px solid #333;
            clear: left;
            padding: 5px;
        }

实现tab效果的JS

function Tab(config) {
            debugger;
            this._root = config.root;
            this._currentClass = config.currentClass;
            var trigger = config.trigger || 'click';
            this._handler = config.handler;
            var autoPlay = config.autoPlay;
            var playTime = config.playTime || 3000;
            this._tabMenus = GLOBAL.Dom.getElementsByClassName("J_tab-menu", this._root);
            this._tabContents = GLOBAL.Dom.getElementsByClassName("J_tab-content", this._root);
            this.currentIndex = 0;
            var This = this;
            if (autoPlay) {
                setInterval(function () {
                    This._autoHandler();
                }, playTime);
            }
            for (var i = 0; i < this._tabMenus.length; i++) {
                this._tabMenus[i]._index = i;
                GLOBAL.Event.on(this._tabMenus[i], trigger, function () {
                    This.showItem(this._index);
                    this.currentIndex = this._index;
                });
            }
        }
        Tab.prototype = {
            showItem: function (n) {
                for (var i = 0; i < this._tabContents.length; i++) {
                    this._tabContents[i].style.display = 'none';
                }
                this._tabContents[n].style.display = 'block';
                if (this._currentClass) {
                    var currentMenu = GLOBAL.Dom.getElementsByClassName(this._currentClass, this._root)[0];
                    if (currentMenu) {
                        GLOBAL.Dom.removeClass(currentMenu, this._currentClass);
                    }
                    GLOBAL.Dom.addClass(this._tabMenus[n], this._currentClass);
                }
                if (this._handler) {
                    this._handler(n);
                }
            },
            _autoHandler: function () {
                this.currentIndex++;
                if (this.currentIndex >= this._tabMenus.length) {
                    this.currentIndex = 0;
                }
                this.showItem(this.currentIndex);
            }
        };

调用tab的JS

        var tabs = GLOBAL.Dom.getElementsByClassName("tab");
        console.dir(tabs.length);
        new Tab({ root: tabs[0], trigger: "mouseover" });
         new Tab({ root: tabs[1], currentClass: "tabcurrentMenu", autoPlay: true, playTime: 5000 });
         new Tab({
             root: tabs[2], currentClass: "tabcurrentMenu", trigger: "mouseover", handler: function (index) {
                 console.log('您激活的是第' + (index + 1) + '个标签');
             }
         });