今日看到之前寫的一段js代碼，關於導航部分鼠標放上去變類，鼠標離開等效果

前端代碼

<div class="con12">
			<div class="left">
				<ul id="liu">
					<li class="chang02">長雙歧桿菌</li>
					<li class="chang01">短雙歧桿菌</li>
					<li class="chang01">乳雙歧桿菌</li>
					<li class="chang01">嗜酸乳桿菌</li>
					<li class="chang01">羅伊氏乳桿菌</li>
					<li class="chang01">鼠李糖乳桿菌</li>
				</ul>
			</div>

			<div class="right">

				<div class="show">
					<div class="title">
						<span class="one">長雙歧桿菌</span>  <span class="two">Bifidobacterium longum</span>  <span class="three">11.5億 CFU/小袋</span>
					</div>
					<div class="des">
						可降低腸道 pH，抑制致病菌的生長繁殖，達到調節腸道菌群失調和改善腸道微環境的效果<span class="biao">[7]</span>。
					</div>
					<div class="desimg">
						<img src="img/des01.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">短雙歧桿菌</span>  <span class="two">Bifidobacterium breve</span>  <span class="three">11億 CFU/小袋</span>
					</div>
					<div class="des">
						擁有較強的抗酸能力與粘附力，黏附在腸道細胞膜上，能有效阻止致病菌的入侵，給寶寶一個健康的腸道<span class="biao">[8,9]</span>。
					</div>
					<div class="desimg">
						<img src="img/duansuangqi.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">乳酸雙歧桿菌</span>  <span class="two">Bifidobacterium lactis</span>  <span class="three">12億 CFU/小袋</span>
					</div>
					<div class="des">
						乳雙歧桿菌能增強寶寶的細胞免疫和體液免疫功能，提高寶寶的免疫力，讓寶寶少生病<span class="biao">[10]</span>。
					</div>
					<div class="desimg">
						<img src="img/rusuangqi.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">鼠李糖乳桿菌</span>  <span class="two">Lactobacillus rhamnosus</span>  <span class="three">6.5億 CFU/小袋</span>
					</div>
					<div class="des">
						參與寶寶消化道內菌群調節, 排除寶寶體內毒素，維持寶寶腸道健康<span class="biao">[11]</span>。
					</div>
					<div class="desimg">
						<img src="img/shulitang.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">羅伊氏乳桿菌</span>  <span class="two">Lactobacillus reuteri</span>  <span class="three">1億 CFU/小袋</span>
					</div>
					<div class="des">
						增加腸道固水物質——短鏈脂肪酸的含量,軟化大便，並且有很強的粘附能力，對改善腸道黏膜免疫功能，提高寶寶免疫力具有積極的作用<span class="biao">[12]</span>。
					</div>
					<div class="desimg">
						<img src="img/luoyishi.jpg">
					</div>
				</div>

				<div class="show none">
					<div class="title">
						<span class="one">嗜酸乳桿菌</span>  <span class="two">Lactobacillus acidophilus</span>  <span class="three">8億 CFU/小袋</span>
					</div>
					<div class="des">
						發酵後形成乳酸，幫助寶寶消化腸胃內的食物，提高鈣、磷、鐵的利用率，並且對其他乳桿菌和雙歧桿菌在腸道的增殖具有積極作用<span class="biao">[13,14]</span>。
					</div>
					<div class="desimg">
						<img src="img/sishuanru.jpg">
					</div>
				</div>

			</div>
		</div>

　　js代碼

window.onload=function(){
	var one = document.getElementById(‘liu‘);
	var oPoint = one.getElementsByTagName(‘li‘);
	var div = document.getElementsByClassName(‘show‘);
	
	var lilen = oPoint.length;
	for (var i = 0; i < lilen; i++) {
		oPoint[i].index = i;
		oPoint[i].onmouseover = function (){
			for (var j = 0; j <lilen; j++) {
				oPoint[j].className = "chang01";
				div[j].className += " none";
            }

            oPoint[this.index].className = "chang02";
            div[this.index].className = "show";
		}
		
	}
}

　　其中，看到

oPoint[i].index = i;
一時之間想不明白，大體好像是關於js的閉包知識，查找資料
https://segmentfault.com/a/1190000002805295

js閉包講解