直接上代码吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
ul li{list-style: none;}
.box{width: 500px;height: 200px;margin: 0 auto;}
#tab{width: 498px;height: 48px;border: 1px solid #AAA;display: flex;justify-content: space-between;}
#tab li{font-size: 16px;line-height: 50px;}
#content{width:500px;height: 150px;background: burlywood;}
#content div{display: none;}
#content div:nth-child(1){background: red;}
#content div:nth-child(2){background: yellowgreen;}
#content div:nth-child(3){background: blue;}
#content div:nth-child(4){background: rebeccapurple;}
#content div:nth-child(5){background: yellow;}
#content .show{display: block;}
.active{background: #47c1f7;font-weight: 600;font-size: 22px;}
</style>
</head>
<body>
<div class="box">
<ul id="tab">
<li class="active">我是标题一</li>
<li>我是标题二</li>
<li>我是标题三</li>
<li>我是标题四</li>
<li>我是标题五</li>
</ul>
<div id="content">
<div class="show">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<script>
var tab = document.getElementById('tab');
var li = tab.getElementsByTagName('li');
var content = document.getElementById('content');
var div = content.getElementsByTagName('div');
for (var i = 0;i<li.length; i++) {
(function (j) {
li[i].onclick = function () {
for (var i = 0;i<li.length; i++) { //遍历所有的li 隐藏
li[i].className = ''; // i 所有的
div[i].style.display = 'none';
}
// j 当前的元素
li[j].className = 'active';
div[j].style.display = 'block'; //显示当前的元素
}
})(i);
}
</script>
</body>
</html>
为什么要使用闭包？
在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以读取函数内部的变量，可以让变量的值始终保持在内存中。
因此会造成内存泄露：内存泄露不是内存真正的泄露了，而是在使用闭包的过程中，闭包中的元素得不到释放，元素占内存越来越多，剩余越来越少，感觉像内存泄露了一样。
怎么解决这个问题：
释放元素，当在应用完这个元素过后，把值设置为 null
打破循环引用
添加另一个闭包
避免闭包自身
