关于直接将id属性作为index使用
首先,我没直接使用id作为索引,使用setAttribute方法避免直接使用id,前端工程师应该知道ID对一个元素的重要性,在此案例中,id也不具有语义化,因此强烈建议使用setAttribute("index",i)来设置属性,通过getAttribute(index)来获取属性值;我的代码如下:
//封装获取ID的方法
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload = tab;
function tab(){
var index = 0; // 当前高亮页签的索引
var timer = null; //初始化定时器
var nav = $('tabMenu').getElementsByTagName('li'); // 获取tab中的导航元素
var con = $('tabContent').getElementsByTagName('div'); // 获取tab中的内容
//如果nav数目和内容数目不等
if(nav.length != con.length) return;
//绑定手动事件
for(var i=0;i<nav.length;i++){
nav[i].setAttribute("order",i);
nav[i].onmouseover = function(){
clearInterval(timer);
changeOption(this.getAttribute('order'));
// alert(this.order);
} //鼠标移入事件
nav[i].onmouseout=function(){
timer=setInterval(autoPlay,1500);
} //鼠标移出事件
}
if(timer){
clearInterval(timer);
timer=null;
}
// 添加定时器,改变高亮的页签
timer = setInterval(autoPlay,1500)
// 封装自动播放函数
function autoPlay(){
index++;
if(index>=nav.length){
index = 0;
}
changeOption(index);
}
//封装重复的函数
function changeOption(curIndex){
for(var j=0;j<nav.length;j++){
nav[j].className="";
con[j].style.display="none";
}
nav[curIndex].className = "select";
con[curIndex].style.display = "block";
index = curIndex;
}
} //function tab