tab标签手动切换 延时切换 自动切换 源代码

html

<div class="col-lg-6 text-center">
                <div id="notice" class="notice">
                    <div class="notice-title" id="notice-title">
                            <ul>
                                <li class="selected">Project-A</li>
                                <li>Project-B</li>
                                <li>Project-C</li>
                            </ul>
                    </div>
                    <div class="notice-con" id="notice-con">
                            <div class="mod" style="display: block;">
                                <ul>
                                    <li>Acontent</li>
                                </ul>
                            </div>
                            <div class="mod">
                                <ul>
                                    <li>Bcontent</li>
                                </ul>
                            </div>
                            <div class="mod">
                                <ul>
                                    <li>Ccontent</li>
                                </ul>
                            </div>
                    </div>
        </div>
        </div>

css

.notice{
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid;
    overflow: hidden;
    margin: 0 auto;
}
.notice-title{
    height: 27px;
    position: relative;
    background-color: #f7f7ff7;
}
.notice-title li{
    float: left;
    width: 74px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
    background: #eee;
    border-bottom: 1px solid #dedcdc;
    padding: 0 1px;
}

.notice-title ul{
    position: absolute;
    width:301px;
    left: -1px;
}
.notice-title li.selected{
    background: #FFFFFF;
    border-bottom: 1px solid #DEDCDC;
    border-left: 1px solid #DEDCDC;
    border-right: 1px solid #DEDCDC;
    padding: 0;
    font-weight: bolder;
}
.notice .mod{
    margin: 10px 10px 10px 19px;
    display: none;
}
.notice-con li{
    float:left;
    width:50%;
    height: 25px;
}

js代码部分：
tab手动切换

   //手动切换
    //获取鼠标滑过或点击的标签和要切换内容的元素
    var titles = $('notice-title').getElementsByTagName('li'),
        divs = $('notice-con').getElementsByClassName('mod');
    if(titles.length !=divs.length)
    return;
    //遍历titles下的所以li
    for(var i =0;i<=titles.length;i++){
        titles[i].num=i;//第i个titles的li的值正好等于i，添加索引
        titles[i].onmouseover=function(){
            //清除所有li的selected
            for(var j=0;j<titles.length;j++){
                titles[j].className='';
            }
               //设置当前li的selected
            titles[j].className='selected';
            //清除所有div的display
            for(var k=0;k<divs.length;k++){
                
            }
            //设置当前div的display
            divs[this.num].style.display='block';
        }
    }

tab延时切换

//延时切换
//  标签的索引
    var index=0;
    var timer=null;
    //获取鼠标滑过或点击的标签和要切换内容的元素
    var titles = $('notice-title').getElementsByTagName('li'),
        divs = $('notice-con').getElementsByTagName('div');
    if(titles.length !=divs.length)
    return;
    //遍历titles下的所以li
    for(var i =0;i<=titles.length;i++){
    titles[i].num=i;
    titles[i].onmouseover=function(){
        var that=this;//用that变量引用当前滑过的li
        //如果存在定时器则清除，只有停留时间大于500ms时才执行
        if(timer){
            clearTimeout(timer);
            timer=null;
        }
        //延迟半秒执行
        timer=window.setTimeout(function(){
            //清除所有li的selected 清除所有div的display
            for(var j=0;j<titles.length;j++){
                titles[j].className='';
                divs[j].style.display="none";
            }
               //设置当前li的selected 设置当前div的display
            titles[that.num].className='selected';
            divs[that.num].style.display='block';
        },500);
    }
    }

tab标签自动切换

function tab(){
    var index=0;//当前显示的索引
    var timer=null;
    //获取索引li和div
    var titles = $('notice-title').getElementsByTagName('li');
    var divs= $('notice-con').getElementsByTagName('div');
    // 遍历每一个页签且给他们绑定事件
    for(i=0;i<titles.length;i++){
        titles[i].num=i;
        titles[i].onmouseover=function(){
            clearInterval(timer);//鼠标滑过，清除定时器   
            changOption(this.num);
        }
        //鼠标离开
        titles[i].onmouseout=function(){
            timer=setInterval(autoPlay,2000);
        }
    }
    function changOption(curIndex){
        index=curIndex;//bug修复
        //起始位置
        for(var j=0;j<titles.length;j++){
            titles[j].className='';
            divs[j].style.display='none';
        }
        //高亮显示当前li
        titles[curIndex].className='selected';
        divs[curIndex].style.display='block';
    }
    function autoPlay(){
        index++;
        if(index>=titles.length){
            index=0;
        }
        changOption(index);
        }
    //timer为真的时候清除定时器，优化
    if(timer){
        clearInterval(timer);
        timer=null;
    }
    timer=setInterval(autoPlay,2000);
}