您好,欢迎访问一九零五行业门户网

使用javascript实现简单的选项卡切换_javascript技巧

代码相当简洁、简单易懂,就不多废话了。
直接奉上代码:
复制代码 代码如下:
js简单选项卡
首页
                技术
                生活
                作品
首页
技术
生活
作品
------demo.js---------------
复制代码 代码如下:
window.onload=function(){
    tabs(tabs,mouseover);
}
function tabs(id,trigger){
    var tabbtn = document.getelementbyid(id).getelementsbytagname(h2)[0].getelementsbytagname(a);
    var tabscontent = document.getelementbyid(id).getelementsbytagname(p);
    for(var i=0;i        tabbtn[i].index = i;
        if(trigger=='mouseover'){
            tabbtn[i].onmouseover=function(){
                clearclass();
                this.classname=on;
                showcontent(this.index);
            }
        }
        function showcontent(n){
            for (var i=0; i                tabscontent[i].index = i;
                tabscontent[i].classname = tabs-content_hide;
        }
        tabscontent[n].classname=tabs-content;
    }
        function clearclass(){
            for(var i=0;i                tabbtn[i].classname=;
            }
        }
    }
}
是不是很简单就实现了选项卡的切换效果呢,小伙伴们自己美化下就可以用到自己项目中去了。
其它类似信息

推荐信息