• 原生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>
  • 相关阅读:
    vue router 跳转动画
    less 循环
    在iconfont上批量下载图标
    function(h)
    三元表达式
    CSS3 object-fit 属性
    MaC 修改MySQL密码
    CSS3 animation 属性
    css控制文字超过2行不显示
    ionic动画
  • 原文地址:https://www.cnblogs.com/helloNico/p/12125097.html
Copyright © 2020-2023  润新知