js/jq 选项卡开发js代码

悠悠 2021-12-07 13:13 288阅读 0赞

往往最基础的js代码能够学到很多，成才很快的东西，今天就写了个tab选项卡，希望你和同样的我有所收获。

![1181828-20190521150134132-849861255.png][]

代码:

<!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>

转载于:https://www.cnblogs.com/xiaobaicai123/p/10899890.html

[1181828-20190521150134132-849861255.png]: /images/20211207/413c9c4b949f488bb0b87b134f647de5.png