直接上代碼吧！
<!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">我是標(biāo)題一</li>
<li>我是標(biāo)題二</li>
<li>我是標(biāo)題三</li>
<li>我是標(biāo)題四</li>
<li>我是標(biāo)題五</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 當(dāng)前的元素
li[j].className = 'active';
div[j].style.display = 'block'; //顯示當(dāng)前的元素
}
})(i);
}
</script>
</body>
</html>
為什么要使用閉包？
在javascript語(yǔ)言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡(jiǎn)單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”。所以本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。
閉包可以讀取函數(shù)內(nèi)部的變量，可以讓變量的值始終保持在內(nèi)存中。
因此會(huì)造成內(nèi)存泄露：內(nèi)存泄露不是內(nèi)存真正的泄露了，而是在使用閉包的過(guò)程中，閉包中的元素得不到釋放，元素占內(nèi)存越來(lái)越多，剩余越來(lái)越少，感覺(jué)像內(nèi)存泄露了一樣。
怎么解決這個(gè)問(wèn)題：
釋放元素，當(dāng)在應(yīng)用完這個(gè)元素過(guò)后，把值設(shè)置為 null
打破循環(huán)引用
添加另一個(gè)閉包
避免閉包自身
