一. Tab選項卡有多種,點擊切換,滑過切換,延時切換,自動切換 - 基于JS

HTML結(jié)構(gòu)

<div id="notice" class="notice">
        <div id="notice-tit" class="notice-tit">
            <ul>
                <li class="select"><a href="javascript:;">公告</a></li>
                <li><a href="javascript:;">規(guī)則</a></li>
                <li><a href="javascript:;">論壇</a></li>
                <li><a href="javascript:;">安全</a></li>
                <li><a href="javascript:;">公益</a></li>
            </ul>
        </div>
        <div id="notice-con" class="notice-con">
            <div class="mod" style="display:block"> 這是第一 </div>
            <div class="mod">這是第二</div>
            <div class="mod">這是第三</div>
            <div class="mod">這是第四</div>
            <div class="mod">這是第五</div>
        </div>
    </div>

CSS

*{margin:0;padding:0;list-style:none;font-size:12px;}
.notice{width:298px;height:98px;margin:10px;border:1px solid #eee;overflow:hidden;}
.notice-tit{height:27px;position:relative;background:#f7f7f7;}
.notice-tit ul{position:absolute;width:301px;left:-1px;}
.notice-tit li{float:left;background:#f7f7f7;width:58px;text-align:center;height:26px;line-height:26px;padding:0 1px;overflow:hidden;border-bottom:1px solid #eee;}
.notice-tit li a:link,.notice-tit li a:visited{text-decoration:none;color:#000;}
.notice-tit li a:hover{color:#f90;}
.notice-tit li.select{background:#fff;border-bottom-color:#fff;border-left:1px solid #eee;border-right:1px solid #eee;padding:0;font-weight:bold;}
.notice-con .mod{margin:10px 10px 10px 19px;display:none;}
.notice-con .mod li{float:left;width:134px;height:25px;overflow:hidden;}

• 點擊切換 和 滑過切換 ---直接更換事件即可

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
    //獲取鼠標滑過活點擊的標簽和要切換內(nèi)容的元素
    var titles=$("notice-tit").getElementsByTagName("li");
    var divs=$("notice-con").getElementsByTagName("div");
    if(titles.length!=divs.length){return false;}
    for(var i=0;i<titles.length;i++){
        titles[i].id=i;
        titles[i].onclick=function(){
            for(var g=0;g<titles.length;g++){
                titles[g].className="";
                divs[g].style.display='none';
            }
            this.className='select';
            divs[this.id].style.display="block"
        }
    }
}

• 延時切換

 function $(id){return typeof id==='string'?document.getElementById(id):id; }
    window.onload=function(){
        var timer=null;
        var lis=$("notice-tit").getElementsByTagName("li");
        var divs=$("notice-con").getElementsByTagName("div");
        if(lis.length!=divs.length){return false;}
        for(var i=0;i<lis.length;i++){
            lis[i].id=i;
            lis[i].onmouseover=function(){
                if(timer){clearTimeout(timer);timer=null;}
                var that=this;
                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="none";
                },500)
            }
        }
    }

• 自動切換

 function $(id){  return typeof id==='string'?document.getElementById(id):id; }
    window.onload=function(){
        var index=0;//標簽的索引
        var timer=null;
        var lis=$("notice-tit").getElementsByTagName("li");
        var divs=$("notice-con").getElementsByTagName("div");
        for(var i=0;i<lis.length;i++){
            lis[i].id=i;
            lis[i].onmouseover=function(){
                clearInterval(timer);
                index=this.id;
                change()
            }
            lis[i].onmouseout=function(){
                index=this.id;
                timer=setInterval(autoPlay,1000)
            }
        }
        if(timer){clearInterval(timer);timer=null;}
        timer=setInterval(autoPlay,1000);
        function autoPlay(){
            index++;
            if(index>=lis.length){index=0; }
            change()
        }
        function change(){
            for(var j=0;j<lis.length;j++){
                lis[j].className='';
                divs[j].style.display="none";
            }
            lis[index].className='select';
            divs[index].style.display="block";
        }
    }

二.Tab標簽切換--基于JQ

$().ready(function(){
    var tabs=$("ul li");
    var content=$("section div");
    tabFn1(tabs,content,'click');
    tabFn2(tabs,content,'click');

    //方法一
    function tabFn1(tabNav,Con,aEvent){
        tabNav.removeClass('current').eq(0).addClass('current');
        Con.hide().eq(0).show();
        tabNav.on(aEvent,function(){
            tabNav.removeClass('current');
            $(this).addClass('current');
            Con.hide().eq($(this).index()).show();
        })
    }
    //方法二
    function tabFn2(tabNav,Con,aEvent){
        tabNav.removeClass('current').eq(0).addClass('current');
        Con.hide().eq(0).show();
        tabNav.each(function(index){
            $(this).on(aEvent,function(){
                tabNav.removeClass('current');
                 $(this).addClass('current');
                Con.hide().eq(index).show();
            })
        })
    }
})