代码:
<body>
<div class="box" id="one">
<div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div>
</div>
<div class="box" id="two">
<div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div>
</div>
</body>
</html>
<script>
// 封装tab栏 function tab(id) { // 获取元素,只获取这个id下面的span和li元素 var eleId = document.getElementById(id); // 获取id元素 var spans = eleId.getElementsByTagName("span"); //4个span var lis = eleId.getElementsByTagName("li"); //4个li for(var i=0; i<spans.length;i++) { // 遍历4个span spans[i].index = i; //给每个span指定一个索引号 spans[i].onmouseover = function() { //鼠标经过span元素 //先清除所有的spans和lis的样式 for(var j = 0;j<spans.length; j++) { spans[j].className = ""; lis[j].className = ""; } this.className = "current"; //当前span改变样式 lis[this.index].className = "current"; //当前那个li显示出来 } } } tab("one"); // 实参 tab("two"); // 实参
问题:tab()函数调用两次,获取了不同id下的spans和lis元素,同时给每个span元素绑定了事件,当事件触发时,执行匿名函数,这个时候,在匿名函数中,它怎么知道spans和lis变量代表的是one元素中的,还是two元素中的呢? tab()函数执行完毕,spans和lis变量释放了吗?
这段代码达不到你想要的效果. lis设为空会导致事件函数中的lis为null, 详情请搜索"循环中产生的闭包".
一周热门 更多>