原生js之table切换

用原生js实现table切换

效果图如下：
点击触发button变色，并使div中显示相对应的名称

首先先搭建模块，四个input，类型为button类型，再加四个div，搞定！

<input type="button" value="table1">
<input type="button" value="table2">
<input type="button" value="table3">
<input type="button" value="table4">
<div style="display: block;">显示table1</div>
<div>显示table2</div>
<div>显示table3</div>
<div>显示table4</div>

接下来是样式
首先设置四个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.length;i++){
		inputarr[i].index=i;
}

接下来就是点击事件：
每次点击都要使相对应的div显现出来，而且还要使相对应的button变色，那么我们事先定义的active类就派上用场了。active类的样式为黄色，那我们可以使被点击的button的classname成为active，并且使相对应的div显现出来
第一个关于 j 的for循环使得所有的button类名都为空，并且可以起到清空active类的作用，第二个关于 k 的循环使得所有的div都隐藏起来，也起到了清空的作用（因为我们后面会进行设置，每次设置完进行下一次点击时都需要进行清空）

for(var i=0;i<inputarr.length;i++){
	inputarr[i].onclick=function(){
		for(var j=0;j<inputarr.length;j++){
			inputarr[j].className="";  //清空active类
		}
		// 将所有div设置为不显示
		for(var k=0;k<divarr.length;k++){
			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模块

<input type="button" value="table1">
<input type="button" value="table2">
<input type="button" value="table3">
<input type="button" value="table4">
<div style="display: block;">显示table1</div>
<div>显示table2</div>
<div>显示table3</div>
<div>显示table4</div>

javascript模块

window.onload=function(){
	// getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
	var inputarr=document.getElementsByTagName("input");//将所有input生成为一个集合
	var divarr=document.getElementsByTagName("div");//将所有div生成为一个集合
	for(var i=0;i<inputarr.length;i++){
		// 获取按钮数组的下标
		inputarr[i].index=i;
		// 点击按钮触发
		inputarr[i].onclick=function(){
			for(var j=0;j<inputarr.length;j++){
				inputarr[j].className="";  //清空active类
			}
			// 将所有div设置为不显示
			for(var k=0;k<divarr.length;k++){
				divarr[k].style.display="none";
			}
			//将点击的按钮设置为active类
			inputarr[this.index].className="active";
			//将点击的按钮对应的div显示
			divarr[this.index].style.display="block";
		}
	}
}