原生javascript实现简洁通用的选项卡代码

作者：管理员

发布时间：2013/10/11 14:01:09

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=347

/*
    选项卡函数：
    cmd：点击元素集合
    con：显示容器集合
    evt：触发事件
    css：为当前点击元素的样式名称
    index：为默认显示第几项的索引值    
    email : kingark@163.com
*/

(function(t){
    
    window[t] = function(cmd, con, evt, css, index){
            //默认触发事件
        var evt = evt || 'mouseover',
            //默认样式名
            css = css || 'curr',
            index = index || 0;
        //初始化显示项
        show(index);
        //为点击元素绑定事件
        for(var i = 0, l = cmd.length; i < l; i ++){
            //为准确获得i的值用闭包传值
            (function(n){
                cmd[n]['on'+ evt] = function(){
                    //切换到索引为i的选项
                    show(n);
                }
            })(i);
        };
        //切换显示
        function show(i){
            cmd[index].className = (' ' + cmd[index].className + ' ').replace(' ' + css + ' ', '');
            con[index].style.display = 'none';
            index = i;
            cmd[index].className += ' ' + css;
            con[index].style.display = 'block';
        }
    }

//指定选项卡函数的名称
})('Tab');

关键字：javascript 选项卡 jquery选项卡 选项卡插件