<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生JS实现table切换</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 200px;
margin: 20px auto;
}
li {
width: 100px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
font-size: 16px;
font-weight: 700;
}
ul li:nth-child(1) {
background: blue;
}
ul li:nth-child(2) {
background: red;
}
.box div {
width: 400px;
height: 200px;
display: none;
position: fixed;
top: 40%;
left: 50%;
margin-left: -100px;
line-height: 200px;
text-align: center;
font-size: 18px;
font-weight: 700;
}
.box div.block {
display: block;
}
.box div.active {
opacity: 0;
transform: translateX(100px);
animation: play 0.6s linear forwards;
}
li.border {
border: 3px solid #ccc;
}
img {
width: 100%;
}
@keyframes play {
form {
opacity: 0;
transform: translateX(0px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<body>
<ul>
<li class="border"></li>
<li></li>
</ul>
<div class="box">
<div class="block"><img src="图片" alt=""></div>
<div><img src="图片" alt=""></div>
</div>
</body>
</html>
<script>
var uLi = document.querySelectorAll("li");
var Div = document.querySelectorAll(".box div");
for (var i = 0; i < uLi.length; i++) {
uLi[i].index = i; //保存
uLi[i].onclick = function() { //所有li标签注册点击事件；
for (var j = 0; j < Div.length; j++) {
Div[j].className = ""; //所有div的类名为空；
}
var i = this.index; //i = 当前点击li标签的索引值
Div[i].className = "block active";
for (var k = 0; k < uLi.length; k++) { //跟上面类似
uLi[k].className = "";
}
this.className = "border";
}
}
</script>