<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
font-size:12px;
}
body{
background-color:#eee;
}
#tabs{
width:300px;
margin:50px auto;
background-color:#fff;
}
#title ul{
overflow:hidden;
}
#title li{
float:left;
width:60px;
text-align:center;
line-height:30px;
}
#title li.on{
border-bottom:2px solid red;
font-weight:bold;
}
#content{
padding:10px;
}
#content ul{
display:none;
}
#content li{
line-height:25px;
}
</style>
</head>
<body>
<p id="tabs">
<p id="title">
<ul>
<li class="on">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</p>
<p id="content">
<ul style="display:block;">
<li>阿里苏宁发布"新三体"战略 打造未来十年格局</li>
<li>高诚信会员无条件信任 200余万广告商品被处罚</li>
</ul>
<ul>
<li>出售假冒商品规则变更 商品发布数量限制变更</li>
<li>中国质造市场管理规范变更 淘宝网营销规则变更</li>
</ul>
<ul>
<li>淘宝招募卖家志愿者 阿里推出兼职神器</li>
<li>700家热风淘宝路 是赚钱还是骗子</li>
</ul>
<ul>
<li>淘宝用户必备神器 卖家账户安全9守则</li>
<li>支付宝实名认证信息 账户没钱也被骗？</li>
</ul>
<ul>
<li>阿里联合公益计划启动 一图看懂联合公益计划</li>
<li>公益宝贝卖家发票索取 公益机构淘宝开店攻略</li>
</ul>
</p>
</p>
<script type="text/javascript">
var li = document.getElementById('title').getElementsByTagName('li');
var ul = document.getElementById('content').getElementsByTagName('ul');
console.log(ul);
console.log(li);
for (var i = 0,len = li.length; i < len; i++){
li[i].index = i;
li[i].onmouseover = function (){
for (var j = 0; j < len; j++ ){
li[j].removeAttribute('class');
}
this.className = "on";
for (var c = 0; c < len; c++) {
ul[c].style.display = "none";
//ul[c].setAttribute('style.dispaly','none');
}
ul[this.index].style.display = "block";
console.log(i);
}
console.log(i);
}
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
onmouseover is bound to an event callback function. The callback function will only be executed when the event is triggered, but the loop has ended before that, so each time the event is triggered, the final value (i=5) is obtained. To solve this problem The problem can be solved using IIFE (immediate execution function), as follows
If you read it correctly, the latter i variable is already outside the loop, and the previous assignment has been replaced. If you want to store them all, please declare it as json or concatenate strings