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);
}