那位大神给我讲讲js选项卡的原理
<script>window.onload=function(){varotab=document.getElementById("tab");varoli=otab.g...
<script>
window.onload=function(){
var otab=document.getElementById("tab");
var oli=otab.getElementsByTagName("li");
var odiv=otab.getElementsByTagName("div");
for(i=0;i<oli.length;i++){
oli[i].index=i;//我主要是看不懂这句是什么意思？
oli[i].onclick=function(){
for(i=0;i<oli.length;i++){
odiv[i].style.display="none"
}
odiv[this.index].style.display="block"
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
<div style="display:block">内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</body> 展开
window.onload=function(){
var otab=document.getElementById("tab");
var oli=otab.getElementsByTagName("li");
var odiv=otab.getElementsByTagName("div");
for(i=0;i<oli.length;i++){
oli[i].index=i;//我主要是看不懂这句是什么意思？
oli[i].onclick=function(){
for(i=0;i<oli.length;i++){
odiv[i].style.display="none"
}
odiv[this.index].style.display="block"
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
<div style="display:block">内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</body> 展开
2个回答
展开全部
选项卡的原理是，点击某个标签的时候对应的内容显示，其他的内容隐藏，这样就达到了效果
oli[i].index=i;//我主要是看不懂这句是什么意思？ 这句话的意思是给每一个dom对象附一个属性，该属性就是索引。这样以后你取到这个对象的时候，使用obj.index就能取到当前的对象是第几个。
就比如，
我定义一个对象 var obj={name:"haha"}
然后obj.index=1
这样我后面使用obj.index就能取到这是第几个对象了
oli[i].index=i;//我主要是看不懂这句是什么意思？ 这句话的意思是给每一个dom对象附一个属性，该属性就是索引。这样以后你取到这个对象的时候，使用obj.index就能取到当前的对象是第几个。
就比如，
我定义一个对象 var obj={name:"haha"}
然后obj.index=1
这样我后面使用obj.index就能取到这是第几个对象了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
for(i=0;i<oli.length;i++){
oli[i].index=i; //这一句是给你的每个oli对象的每个值定义一个属性。存储的是对应的每个li自己的索引值，也就是下标。比如 oli[0] = 0;这样有利于下面去获取对应下标的div。
oli[i].onclick=function(){
for(i=0;i<oli.length;i++){
odiv[i].style.display="none"
}
odiv[this.index].style.display="block" //也就是这边的this.index, this指的是当前的点击的li，然后this.index就会得到相应的下标。然后去更改相应下标的div样式。
}
总的来说是因为for循环再外部绑定点击事件的时候。会一口气走完直接加到最后。在事件的里面没有办法获取[0-oli.length)的每个对应值。所以需要定义index属性。
oli[i].index=i; //这一句是给你的每个oli对象的每个值定义一个属性。存储的是对应的每个li自己的索引值，也就是下标。比如 oli[0] = 0;这样有利于下面去获取对应下标的div。
oli[i].onclick=function(){
for(i=0;i<oli.length;i++){
odiv[i].style.display="none"
}
odiv[this.index].style.display="block" //也就是这边的this.index, this指的是当前的点击的li，然后this.index就会得到相应的下标。然后去更改相应下标的div样式。
}
总的来说是因为for循环再外部绑定点击事件的时候。会一口气走完直接加到最后。在事件的里面没有办法获取[0-oli.length)的每个对应值。所以需要定义index属性。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
