Tab选项卡实现 javascript

选项卡在网页中非常常见，如上图就是淘宝首页的选项卡。主要形式有点击切换、鼠标滑过切换、延迟切换以及自动切换。

文档结构如下

<div class="tabs">
<div class="tab-tit" id="tab-tit">
<ul>
<li class="select"><a href="#" >公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div class="tab-con" id="tab-con">
<div class="mode" style="display:block;">
<ul>
<li><a href="#">[热门] 阿里全面进军商超</a></li>
<li><a href="#">首站北京补贴10亿</a></li>
<li><a href="#">阿里打击职业差评师</a></li>
<li><a href="#">“中国质造”频道上线</a></li>
</ul>
</div>
<div class="mode">
<ul>
<li><a href="#">虚假交易行为如何排查判定</a></li>
<li><a href="#">淘抢购招商规则变更</a></li>
<li><a href="#">淘宝新规发布汇总(6月)</a></li>
<li><a href="#">规则众议院是个啥？</a></li>
</ul>
</div>
<div class="mode">
<!----结构同上，有几个title则对应几个div---->
</div>
<div class="mode">
<!----结构同上，有几个title则对应几个div---->
</div>
<div class="mode">
<!----结构同上，有几个title则对应几个div---->
</div>
</div>
</div>

javascript实现如下：

function $(id){      //封装获取id的函数
return typeof id === 'string'?document.getElementById(id):id;
}

window.onload = function(){
var titles = $('notice-tit').getElementsByTagName('li');//1.获得标签title下的li对象，以及对应内容的div对象
var divs = $('notice-con').getElementsByTagName('div');
for(var i=0;i<titles.length;i++){
titles[i].id = i;
titles[i].onmouseover = function(){         //2.为li对象绑定鼠标滑过事件
for (var n = 0; n<titles.length; n++){  //当其他标签未被选中的时候，标签不高亮，内容也不显示
titles
.className = '';
divs
.style.display = 'none';
}
this.className='select';　　　　　　//对应标签设置高亮
divs[this.id].style.display='block';//3.事件内获得当前滑过title的索引，将对应内容显示出来

}
}
}

当想要设置延迟时，就需要用到定时器啦。使用setTimeout方法，设置函数延迟多少毫秒执行。

因为setTimeout和setInterval都是window对象的方法，所以直接使用this指针则指向window，所以需要之前定义一个对象引用当前的li。

lis[i].onmouseover = function(){
var that = this;//引用当前滑过li
if (timer) {//如果存在准备执行的定时器，立刻清除。只有当停留时间大于500ms才执行
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function(){
for(var j=0; j<lis.length; j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
lis[that.id].className = 'select';
divs[that.id].style.display='block';
},500);
}

当然，自动切换用到的就是setInerval方法啦。为了更加友好，在鼠标滑过标签时停止自动切换，并显示对应内容，移开时继续开始自动切换。

注意，为了使鼠标移开时从当前项开始切换，切换函数内将当前索引赋给index。

for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseover = function(){
clearInterval(timer);
changeOption(this.id);
}
lis[i].onmouseout=function(){
timer = setInterval(autoPlay,2000);
}
}
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setInterval(autoPlay,2000);
function autoPlay(){
index++;
if (index>=lis.length) {
index=0;
}
changeOption(index);
}
function changeOption(curIndex){  //参数为当前索引
for(var j=0; j<lis.length; j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
lis[curIndex].className='select';
divs[curIndex].style.display='block';
index=curIndex;    //鼠标移开后可以继续从当前项开始切换
}

完成以上Tab切换的实现，其他形式的切换也是类似，如常见的轮播图效果等等实现起来就非常容易啦。

关于setTimeout和setInterval这篇文章http://www.cnblogs.com/mercy/articles/2424882.html写得很好，里面包括实际的用法技巧，曾经帮我解决过一个项目中的问题。

参考课程：http://www.imooc.com/learn/176