原生JS实现点击选项卡，下面内容根据选项卡进行变化

先看前端代码，这边设置了四个按钮，每次点击其中一个按钮，跳出对应的div，其他div隐藏

		
		
		
		
		
111
		
222
		
333
		
444
	

接下来看css样式：将四个div隐藏掉，默认显示第一个，按钮选中的时候，设置按钮颜色

JS代码部分：

 

以上JS是面向过程的写法,现在看下面向对象的写法:

 

//创建构造函数  传参
            //初始化TabSwitch这个对象
            window.onload=function(){
                new TabSwitch('div1')
            }

            function TabSwitch(id){
                var _this = this
                var oDiv = document.getElementById(id);
                this.oBtn = oDiv.getElementsByTagName('input');
                this.aDiv = oDiv.getElementsByTagName('div');

                for(var i=0;i

 

最终效果：