解决前端循环报错的情况

<div class="tab">
<ul class="tab-menuWrapper" id="tab-menuWrapper">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<div class="tab-contentWrapper" id="tab-contentWrapper">
<div>content1</div>
<div style="display: none;">content2</div>
<div style="display: none;">content3</div>
<div style="display: none;">content4</div>
</div>
</div>
<script type="text/javascript">
var tabMenus=document.getElementById("tab-menuWrapper").getElementsByTagName("li");
var tabContents=document.getElementById("tab-contentWrapper").getElementsByTagName("div");
for(var i=0;i<tabMenus.length;i++){
//有问题的循环代码
tabMenus[i].onclick=function(){
alert(i);//每次点击都会只出现4，而且会报错
for(var j=0;j<tabContents.length;j++){
tabContents[j].style.display="none";
}
tabContents[i].style.display="block";
}

//第一种解决方式，使用这个方法时请把有问题的那段代码注释掉
(function(_i){
tabMenus[_i].onclick=function(){
alert(_i);
for(var j=0;j<tabContents.length;j++){
tabContents[j].style.display="none";
}
tabContents[_i].style.display="block";
}
})(i);
//第二种方式
tabMenus[i]._index=i;
tabMenus[i].onclick=function(){
alert(this._index);
for(var j=0;j<tabContents.length;j++){
tabContents[j].style.display="none";
}
tabContents[this._index].style.display="block";
}

}
</script>