原生js tab选项卡粗略封装

            function tab(titleClass,contentClass,activeClass){
                var tabTitle = document.getElementsByClassName(titleClass)[0].getElementsByTagName('div');
                var tabContent = document.getElementsByClassName(contentClass)[0].getElementsByTagName('div');
                for(var i = 0; i<tabTitle.length; i++){
                    tabTitle[i].onclick = (function(j){
                        return function(){
                            tabSelect(j)
                        }
                    })(i)
                }
                function tabSelect(index){
                    for(var i=0; i<tabTitle.length; i++){
                        tabTitle[i].classList = '';
                        tabContent[i].classList = '';
                        tabTitle[index].classList = activeClass;
                        tabContent[index].classList = activeClass;
                    }
                }
            }
            tab('tabNav','tabContent','act')
                <div class="tabNav">
                    <div class="act">全部</div>
                    <div>收益</div>
                    <div>提现</div>
                </div>
                <div class="tabContent">
                    <div class="act">
              1
                    </div>
                    <div class="">
                       2
                    </div>
                    <div class="">
                       3
                    </div>
                </div>
posted @ 2019-12-31 16:27  Hello_nico  阅读(196)  评论(0编辑  收藏  举报