选显卡的思路就是移入显示当前的内容，让其他的隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
text-align: center;
}
nav li{
display: inline;
width: 24%;
text-decoration: none;
padding: 15px;
}
section{
height: 300px;
position: relative;
}
.ss{
width: 50px;
height: 50px;
background: tomato;
position: absolute;
top: -20px;
}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li class="act" style="background-color: gold">选卡1</li>
<li >选卡2</li>
<li >选卡3</li>
<li >选卡4</li>
</ul>
</nav>
<div id="container">
<section class="tab" style="background-color: tomato">内容1</section>
<section class="tab" style="background-color: cyan">内容2</section>
<section class="tab" style="background-color: blueviolet">内容3</section>
<section class="tab" style="background-color: gold">内容4</section>
</div>
</body>
<script>
var list = document.getElementsByTagName("li"); //绑定节点
var tab = document.getElementsByClassName("tab");
for (var k=1;k<list.length;k++){ //循环初始化样式
tab[k].style.display="none"; //让里面的内容除了第一个其他的全部隐藏掉
list[k].style.backgroundColor = "white" //让里面的li除了第一个其他的全部变白色
}
for(var i=0;i<list.length;i++){
list[i].index = i; //让i的每次的值赋给list[i] 索引
list[i].onmouseover = function () { //移入显示
for (var j=0;j<list.length;j++){ //循环
tab[j].style.display = "none" //让内容全部隐藏
list[j].style.backgroundColor = "white"
}
tab[this.index].style.display = "block" //让移入的那块对应的内容显示
this.style.backgroundColor = "gold"
}
}
</script>
</html>
