js实现table切换效果

首先先将html代码写出

<div class="tabs">
		<span class="active title">title1</span>
		<span class="title">title2</span>
		<span class="title">title3</span>
		<div class="content on">内容1</div>
		<div class="content">内容2</div>
		<div class="content">内容3</div>

</div>

写入css代码

span{
	padding:5px;
	border:1px solid  gray;
}
span.active{
	border-color:red;
	color:red;
}
.tabs .content{
	display:none;
	width:300px;
	height:300px;
	border:1px solid #808080;
	margin-top:20px;
}
.tabs .on{
	display:block;
}

写入js代码

//单机span 要知道是第几个span
//让之前有on的content  去掉class on
//让第几个content  添加on
var titles = document.querySelectAll(".tabs .title");//获取class名字为title的值
var contents = document.querySelectAll(".tabs .content");//获取class名字为content的值
//for 初始条件0 结束titles.length
//让之前有on的content  去掉class on
//让第i个content  添加on
for(let i=0; i<titles.length;i++){
	titles[i].onclick=function(){
		var old = document.querySelect(".tabs .content.on");//找到之前有on的content
		old.classList.remove("on");//找到之前有on的content去掉on
		contents[i].classList.add("on");//给当前点击title下标一样的content 添加 on
		var oldt = document.querySelect(".tabs .title.active");
		titles[i].classList.add("active");
	}
}