<!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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
onmouseover est lié à une fonction de rappel d'événement. La fonction de rappel ne sera exécutée que lorsque l'événement est déclenché, mais la boucle est terminée avant cela, donc à chaque fois que l'événement est déclenché, la dernière valeur (i=5) est obtenue. Pour résoudre ce problème Le problème peut être résolu en utilisant IIFE (fonction d'exécution immédiate), comme suit
Si vous l'avez bien lu, cette dernière variable i est déjà en dehors de la boucle et l'affectation précédente a été remplacée. Si vous souhaitez tous les stocker, veuillez le déclarer au format json ou concaténer des chaînes