切换框样式，当鼠标移动到不同的title时，实现table切换，最终效果如下视频所示：
切换框
本切换框的核心思想是设置index属性，通过对index的操作从而实现变换
tab_title_li[i].setAttribute("index",i)
var current_index=this.getAttribute("index")全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 30%;
height: 30vh;
margin: 100px auto;
}
.container .tab_title{
display: flex;
}
.container .tab_title li{
list-style: none;
border: 10px rgb(153, 86, 170) dotted;
margin-right: 5px;
padding: 5px;
cursor: pointer;
border-bottom:none ;
}
.container .tab_title li.current{
color: #e48b8b;
background: #888;
}
.tab_content{
border: 10px solid rgb(153, 86, 170);
background: #f6d861;
height: 30vh;
}
.tab_content div{
height: 100%;
display: none;
text-align: center;
font-size: 150px;
}
.tab_content div:nth-child(1){
display: block;
}
</style>
<script>
window.onload=function(){
var container=document.querySelectorAll(".container")
for(var h=0;h<container.length;h++){
var tab_title_li=container[h].querySelectorAll("li")
for(var i=0;i<tab_title_li.length;i++){
tab_title_li[i].setAttribute("index",i)
tab_title_li[i].onmouseenter=function(){
var current_tab_title_li=this.parentNode.children
for(var j=0;j<current_tab_title_li.length;j++){
current_tab_title_li[j].className=""
}
this.className="current"
var current_index=this.getAttribute("index")
var current_tab_content_div=this.parentNode.nextElementSibling.children
for(var k=0;k<current_tab_content_div.length;k++){
if(current_index==k){
current_tab_content_div[k].style.display="block"
}else{
current_tab_content_div[k].style.display="none"
}
}
}
}
}
}
</script>
</head>
<body>
<div class="container">
<ul class="tab_title">
<li class="current" >title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
</ul>
<ul class="tab_content">
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</ul>
</div>
<div class="container">
<ul class="tab_title">
<li class="current" >title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
</ul>
<ul class="tab_content">
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</ul>
</div>
<div class="container">
<ul class="tab_title">
<li class="current" >title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
</ul>
<ul class="tab_content">
<div>content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</ul>
</div>
</body>
</html>
