码迷,mamicode.com
首页 > 编程语言 > 详细

Tab选项卡实现 javascript

时间:2015-07-27 01:54:26      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

 

技术分享

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

文档结构如下

<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[n].className = ‘‘;
                        divs[n].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

 

Tab选项卡实现 javascript

标签:

原文地址:http://www.cnblogs.com/quying/p/4679058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!