一个不错的页面选项卡标签效果源代码

                摘一个很不错的网页选项卡效果的源代码，经测试可用：

经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个js，希望对大家有用
所有代码都在下面了
代码不多的，只有几k，如果压缩下还要小几k
前面有一处漏了附加样式
修正下。。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 井底的蛙 </ title >
< script  type ="text/javascript" > ...
/**//*
    选项卡封装
    by 井底的蛙
    2008-2-4
*/
opCard = function()
...{
    this.bind = new Array();
    this.index = 0;        //默认显示哪个选项卡，从0开始
    
    this.style = new Array();        //["","",""]
    this.overStyle = false;        //选项是否有over, out变换样式事件，样式为this.style[2]
    this.overChange = false;        //内容是否用over, out直接激活
    this.menu = false;                //菜单类型
    this.nesting = [false,false,"",""];        //是否嵌套，后面2个参数是指定menu,info的子集深度所用id
    
    this.auto = [false, 1000];        //自动滚动[true,2000]
    this.timerID = null;            //自动播放的
    this.menutimerID = null;        //菜单延时的
    
    this.creat = function(func)
    ...{
        var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
        var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
        var my = this, i;
        var argLen = arguments.length;
        var arrM = new Array();
        
        if(this.nesting[0] || this.nesting[1])    // 有选项卡嵌套
        ...{    // 过滤出需要的数据
            var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
            var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
        }
        else
        ...{
            var arrMenu = _arrMenu;
            var arrInfo = _arrInfo;
        }
        
        var l = arrMenu.length;
        if(l!=arrInfo.length)...{alert("菜单和内容必须拥有相同的数量 如果需要，你可以放一个空的在那占位。")}
        
        // 修正
        if(this.menu)...{this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活
        
        // 循环添加各个事件等
        for(i=0;i<l;i++)
        ...{
            arrMenu[i].cName = arrMenu[i].className;
            arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);        //加载样式，菜单的话统一样式
            
            if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器
            ...{
                if(this.overStyle || this.overChange)    // 有over, out 改变样式 或者 激活
                ...{
                    arrMenu[i].onmouseover = function()...{changeTitle(this, 2);autoStop(this, 0);}
                    arrMenu[i].onmouseout = function()...{changeTitle(this, 0);autoStop(this, 1);}
                }
                arrMenu[i].onclick = function()...{if(argLen==1)...{func()}}
                arrInfo[i].style.display = "none";
                continue;
            }
            
            if(i!=this.index || this.menu)...{arrInfo[i].style.display="none"};    //隐藏初始化，菜单的话全部隐藏
            arrMenu[i].index = i;    //记录自己激活值[序号]
            arrInfo[i].index = i;
            
            
            if(this.overChange)    //有鼠标over, out事件
            ...{
                arrMenu[i].onmouseover = function()...{changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
                arrMenu[i].onmouseout = function()...{changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
            }
            else    //onclick触发
            ...{
                arrMenu[i].onclick = function()...{changeOption(this);autoStop(this, 0);if(argLen==1)...{func()}}
                if(this.overStyle)    // 有over, out 改变样式
                ...{
                    arrMenu[i].onmouseover = function()...{changeTitle(this, 2);autoStop(this, 0);}
                    arrMenu[i].onmouseout = function()...{changeTitle(this, 0);autoStop(this, 1);}
                }
                else    // 没有over, out 改变样式
                ...{
                    if(this.auto[0])    // 有自动运行
                    ...{
                        arrMenu[i].onmouseover = function()...{autoStop(this, 0);}
                        arrMenu[i].onmouseout = function()...{autoStop(this, 1);}
                    }
                }
            }
            
            if(this.auto[0] || this.menu)    //arrinfo 控制自动播放
            ...{
                arrInfo[i].onmouseover = function()...{my.menu?changeMenu(1):autoStop(this, 0);}
                arrInfo[i].onmouseout = function()...{my.menu?changeMenu(0):autoStop(this, 1);}
            }
&n

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow