qq_半夏当归吾思所止_0
2017-04-07 22:15
window.onload=function(){
// var tab=document.getElementById("tables");
var li=document.getElementsByTagName("li");
var div=document.getElementsByTagName("div");
for(var i=0;i<li.lenghth;i++){
li[i].index=i;
li[i].onlick=function(){
for(var n=0;n<li.length:n++){
li[n].className="";
div[n].className="hide";
}
this.className = "on";
div[this.index].className = "";
}
}
}
li标签的className的值设置为on,就显示当前的li。
this.className = "on";就是当前点击的li标签显示
div[this.index].className = ""; 就是当前li对应的div显示;
下面这段代码:
li[i].onlick=function(){
for(var n=0;n<li.length:n++){
li[n].className="";
div[n].className="hide";
}
this.className = "on";
div[this.index].className = "";
}
就是点击li的时候 先把所有的li和div都隐藏了,在for循环后面执行的两句就是将点击的li和div显示出来,就实现了切换。
window.onload=function(){
// var tab=document.getElementById("tables");
var li=document.getElementsByTagName("li");
var div=document.getElementsByTagName("div");
for(var i=0;i<li.lenghth;i++){
li[i].index=i; //给li[i]对象创建了一个新的属性,把索引的值就是i存储到这个属性index中(这是重点),为什么要这样做?因为函数的有单独自己的作用域,外面的i和函数里面的i是不一样的。
li[i].onlick=function(){
for(var n=0;n<li.length:n++){
li[n].className=""; // 把所有li的className值清空
div[n].className="hide"; // 同上,其实这里也可以把div的className="" ,起到把值清空的作用
}
this.className = "on";
div[this.index].className = ""; //this.index 就是变量i的值,看前面的代码 li[i].index=i;
}
}
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题