原生js之table切换 |
您所在的位置:网站首页 › js原生table田字 › 原生js之table切换 |
用原生js实现table切换
效果图如下: 点击触发button变色,并使div中显示相对应的名称 首先先搭建模块,四个input,类型为button类型,再加四个div,搞定! 显示table1 显示table2 显示table3 显示table4接下来是样式 首先设置四个div都隐藏,然后将第一个div显现出来,在设置一个active类,使active类的背景颜色为黄色 div{display: none;} .active{background: yellow;}最后是js模块 首先老规矩,进行关联,但是元素太多了怎么办呢?可以考虑使用数组,将所有同种元素生成为一个集合,将它们存储在我们声明好的数组中: getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 var inputarr=document.getElementsByTagName("input");//将所有input生成为一个集合 var divarr=document.getElementsByTagName("div");//将所有div生成为一个集合生成为集合后我们需要使用到它的下标,所以可以选择使用循环来给下标赋值: for(var i=0;i inputarr[i].onclick=function(){ for(var j=0;j divarr[k].style.display="none"; } } }最后进行实现 将被点击的按钮设置为active类和相对应的div显示: //将点击的按钮设置为active类 inputarr[this.index].className="active"; //将点击的按钮对应的div显示 divarr[this.index].style.display="block";完整版代码如下: css样式 div{display: none;} .active{background: yellow;}html模块 显示table1 显示table2 显示table3 显示table4javascript模块 window.onload=function(){ // getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 var inputarr=document.getElementsByTagName("input");//将所有input生成为一个集合 var divarr=document.getElementsByTagName("div");//将所有div生成为一个集合 for(var i=0;i for(var j=0;j divarr[k].style.display="none"; } //将点击的按钮设置为active类 inputarr[this.index].className="active"; //将点击的按钮对应的div显示 divarr[this.index].style.display="block"; } } } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |