三.Tab选项卡切换 tab泛滥成灾啦~原生js和jq两种写法

一. Tab选项卡有多种,点击切换,滑过切换,延时切换,自动切换 - 基于JS

HTML结构

        

            

                
公告
                
规则
                
论坛
                
安全
                
公益
            
        
        

            
 这是第一 
            
这是第二
            
这是第三
            
这是第四
            
这是第五
        
    

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(){
    //获取鼠标滑过活点击的标签和要切换内容的元素
    var titles=$("notice-tit").getElementsByTagName("li");
    var divs=$("notice-con").getElementsByTagName("div");
    if(titles.length!=divs.length){return false;}
    for(var i=0;i

• 延时切换

 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

• 自动切换

 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){index=0; }
            change()
        }
        function change(){
            for(var j=0;j

二.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();
            })
        })
    }
})