选项卡与面向对象

最新推荐文章于 2022-07-20 13:03:00 发布

原创最新推荐文章于 2022-07-20 13:03:00 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的选项卡切换效果，通过为每个按钮添加点击事件，控制不同div的显示与隐藏，实现了页面元素的动态切换。采用面向对象的方式，使代码更加模块化，易于维护。

html部分
在这里插入图片描述
js部分

var oDiv1 = document.getElementById("div1");
            var aBtns = oDiv1.getElementsByTagName("button");
            var aDivs = oDiv1.getElementsByTagName("div");

            //给每一个按钮添加点击
            for(var i=0;i<aBtns.length;i++){
                //获取当前按钮的下标
                aBtns[i].index = i;
                aBtns[i].onclick = function(){
                    //取消所有按钮的样式 和隐藏所有div
                    for(var j=0;j<aBtns.length;j++){
                        aBtns[j].className = "";
                        aDivs[j].style.display = "none";
                    }
                    aDivs[this.index].style.display = "block";
                    //当前按钮被选中
                    this.className = "active";
                }
            }

面向对象

function tabSwitch(id){
               //添加属性
               var node = document.getElementById(id);
               this.aBtns = node.getElementsByTagName("button");
               this.aDivs = node.getElementsByTagName("div");
               var _this = this;

               //将点击按钮，进行切换的方法添加给每一个按钮
               for(var i=0;i<this.aBtns.length;i++){
                   //找到当前按钮下标
                   this.aBtns[i].index = i;
                   this.aBtns[i].onclick = function(){
                       _this.tab(this);
                   };
               }
           }
           //添加方法
           tabSwitch.prototype.tab = function(oBtn) {
               //清楚页面上所有按钮和所有div的样式
               for(var i=0;i<this.aBtns.length;i++){
                   this.aBtns[i].className = "";
                   this.aDivs[i].style.display = "none";
               }
               //获取当前点击按钮
               oBtn.className = "active";
               this.aDivs[oBtn.index].style.display = "block";
               

           }
           window.onload = function(){
               new tabSwitch("div1");
           }

效果
在这里插入图片描述