原生js实现tab选项卡

html：

    <ul class="tabs">
        <li class="tabs-item" href="#page_one">page one</li>
        <li class="tabs-item" href="#page_two">page two</li>
        <li class="tabs-item" href="#page_three">page three</li>
    </ul>

    <div class="tab-content">
        <div class="tab-panel">
            <div class="box" style="background: red"></div>
        </div>
        <div class="tab-panel">
            <div class="box" style="background: green"></div>
        </div>
        <div class="tab-panel">
            <div class="box" style="background: blue"></div>
        </div>
    </div>

    <ul class="tabs">
        <li class="tabs-item" href="#page_one">page one</li>
        <li class="tabs-item" href="#page_two">page two</li>
        <li class="tabs-item" href="#page_three">page three</li>
    </ul>

    <div class="tab-content">
        <div class="tab-panel">
            <div class="box" style="background: red"></div>
        </div>
        <div class="tab-panel">
            <div class="box" style="background: green"></div>
        </div>
        <div class="tab-panel">
            <div class="box" style="background: blue"></div>
        </div>
    </div>

css:

    .tabs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        border-bottom: 1px solid #ebedf2;
        margin-bottom: 20px;
    }

    .tabs .tabs-item{
        margin-right: 30px;
        margin-bottom: -1px;
        background: transparent;
        color: #7b7e8a;
        cursor: pointer;
    }

    .tabs .tabs-item:first-child {
        margin-left: 0;
    }

    .tabs .tabs-item.active {
        color: #34bfa3;
        border-bottom: 1px solid #34bfa3;
    }

    .box {
        width: 100%;
        height: 200px;
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

js:

(function () {

    var tabs = document.getElementsByClassName('tabs');
    var lens = tabs.length;


    if (lens >= 0) {

        for (var i = 0; i <= lens - 1; i++) {
            var tab = tabs[i];
            var content = tab.nextElementSibling;
            bindClick(tab, content);
            initTab(tab, content);
        }
    }

    function bindClick(tab, content) {
        tab.addEventListener('click', function(e) {
            var index = 0;
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName.toLocaleLowerCase() == 'li') {
                tabToggle(target, tab, content);
            }
        });
    }

    function tabToggle(target, tab, content) {
        var index = 0;
        var menuList = tab.children;
        var panelList = content.children;

        if (!menuList.length || !panelList.length || menuList.length !== panelList.length) return;

        for (var i = 0; i <= menuList.length - 1; i++ ) {
            if (target === menuList[i]) {
                index = i;
            }
            var menu = menuList[i];
            var panel = panelList[i];
            menu.className = menu.className.replace(' active', '');
            panel.className = panel.className.replace(' active', '');
        }
        menuList[index].className += ' active';
        panelList[index].className += ' active';
    }

    function initTab(tab, content) {
        var menuList = tab.children;
        var panelList = content.children;
        var menusLens = menuList.length;

        if (!menuList.length || !panelList.length || menuList.length !== panelList.length) return;

        menuList[0].className += ' active';
        panelList[0].className += ' active';
    }

})()