js/jq 选项卡开发js代码

往往最基础的js代码能够学到很多，成才很快的东西，今天就写了个tab选项卡，希望你和同样的我有所收获。
代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/publicClass-1.css"/>
    </head>
    <style type="text/css">
        .content{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
        .content .item-tab button.act{
            background-color: yellowgreen;
        }
        .tab-content >div{
            width: 100%;
            height: 300px;
            background-color: #CCCCCC;
            display: none;
        }
        .tab-content >div.act{
            display: block;
        }
    </style>
    <body>
        <div class="content" id="content">
            <div class="item-tab" id="item-tab">
                <button class="act">选项1</button>
                <button>选项2</button>
                <button>选项3</button>
            </div>
            <div class="tab-content" id="tab-content">
                <div class="item-content act">
                    1
                </div>
                <div class="item-content">
                    2
                </div>
                <div class="item-content">
                    3
                </div>
            </div>
        </div>
        
        <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var mv = new Vue({
                el:'#content',
                data:{
                    
                },
                methods:{
                    
                }
            })

            //jq


//            $(".item-tab button").click(function(){
//                var _this=$(this);
//                var idx=_this.index();
//                console.log(idx)
//                _this.addClass("act").siblings().removeClass('act');
//                $(".item-content").eq(idx).addClass('act').siblings().removeClass('act');
//            });
            
            //js  下面用了两种方法，一种是移除 class 一种是设置class


            var btnList=document.getElementById('item-tab').querySelectorAll('button');
            var showBox=document.getElementById('tab-content').querySelectorAll(".item-content");
            
            function tabfn(btn,boxlist){
                for (var i=0;i<btn.length;i++) {
                    (function(i){
                        btn[i].onclick=function(){
                            for (var j=0;j<btn.length;j++) {
                                
                                btn[j].classList.remove("act");

//                                boxlist[j].classList.remove("act");//移除方法
                                
                                boxlist[j].className = "item-content";//设置Class方法
                            }
                            
                            btn[i].classList.add("act");

//                            boxlist[i].classList.add("act");//添加方法，对应移除
                            
                            boxlist[i].className+=" act";//原来基础上添加设置方法
                        }
                    })(i)
                }
            }
            tabfn(btnList,showBox);
        </script>
    </body>
</html>