tab切换
首先需要将所有内容写出来，再将除了需要显示的内容全部隐藏：（在样式上写display:none;）（不隐藏：display："";）
在上下两个大的内容框里面定义id,方便后面函数需要的查找
设置一个悬浮移入onmouseover，并且在里面定义一个函数：onmouseover="sub()"，在函数里面设置一个事件event
设置一个类样式<style>表示悬浮时的样式,写在一个切换点上（切换点的顺序与下面显示内容的顺序保持一致）
在函数里面找到第一个id接收；在第一个id里面找到它的所有第一子集接收；定义下标为0；设置一个触发
在函数里循环如果当这个事件被触发时，通过下标找到这个数，设置它的class属性为显示；反之没有触发到则隐藏
第二个id在同一个函数里面用同样的方法但不需要循环
#first{
display: flex;
justify-content:space-between;
}
li{
list-style-type:none ;
border: 1px solid #999;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: pink;
color: white;
}
div{
display: flex;
justify-content: space-between;
}
#second>ul{
display: none;
}
.active{
background-color: darkgrey;
}
#second .show{
display:block;
}
</style>
</head>
<body>
<ul id="first">
<li onmouseover="hov(event)" class="active">列表一</li>
<li onmouseover="hov(event)">列表二</li>
<li onmouseover="hov(event)">列表三</li>
<li onmouseover="hov(event)">列表四</li>
</ul>
<div id="second">
<ul class="show">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script>
function hov(e){
var tag =e.target;
var uls = document.getElementById("first");
var lis = uls.querySelectorAll("li");
var index = 0;
for (var i = 0;i<lis.length;i++) {
if(lis[i]==tag){
index=i;
lis[i].className = "active";
}else{
lis[i].className = "";
}
}
var second = document.getElementById("second");
var num = second.querySelectorAll("ul");
for (var i =0;i<ulss.length;i++) {
if(i==index){
num[i].className="show";
}else{
num[i].className="";
}
}
}
</script>
