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

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

经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个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);}
            }
        }    //for结束
        
        if(this.auto[0])
        ...{
            this.timerID = setTimeout(autoMove,this.auto[1])
        }
        
        // 自动播放
        function autoMove()
        ...{
            var n;
            n = my.index + 1;
            if(n==l)...{n=0};
            while(arrMenu[n].getAttribute("skip"))        // 需要跳过的容器
            ...{
                n += 1;
                if(n==l)...{n=0};
            }
            changeOption(arrMenu[n]);
            my.timerID = setTimeout(autoMove,my.auto[1]);
        }
        
        // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!
        function autoStop(obj, num)
        ...{
            if(!my.auto[0])...{return;}
            //if(obj.index==my.index)
            num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
        }
        
        // 改变选项卡
        function changeOption(obj)
        ...{
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);    //修改旧内容
            arrInfo[my.index].style.display = "none";    //隐藏旧内容
            
            obj.className = getClass(obj,my.style[1]);        //修改为新样式
            arrInfo[obj.index].style.display = "";    //显示新内容
            
            my.index = obj.index;    //更新当前选择的index
        }
        
        /**//*        
            只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
            obj：目标对象。    num：1为over，0为out
        */
        function changeTitle(obj, num)
        ...{
            if(!my.overStyle)...{return;};
            if(obj.index!=my.index)...{obj.className = getClass(obj,my.style[num])}
        }
        
        /**//*        
            菜单类型时用
            obj：目标对象。    num：1为over，0为out
        */
        function changeMenu(num)
        ...{
            if(!my.menu)...{return;}
            num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
        }
        
        //关闭菜单
        function menuClose()
        ...{
            arrInfo[my.index].style.display = "none";
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
        }
        
        // 得到className（防止将原有样式覆盖）
        function getClass(o, s)
        ...{
            if(o.cName=="")...{return s}
            else...{return o.cName + " " + s}
        }
        
        //嵌套情况下得到真正的子集
        function getChilds(arrObj, id, num)
        ...{
            var depth = 0;
            var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);        //得到第一个子集
            do    //计算深度
            ...{
                if(firstObj.parentNode.getAttribute("id")==id)...{break}else...{depth+=1}
                firstObj = firstObj.parentNode;
            }
            while(firstObj.tagName.toLowerCase()!="body")    // body强制退出。
            
            var t;
            var arr = new Array();
            for(i=0;i<arrObj.length;i++)    //过滤出需要的数据
            ...{
                t = arrObj[i], d = 0;
                do
                ...{
                    if(t.parentNode.getAttribute("id")==id && d == depth)
                    ...{    
                        arr.push(arrObj[i]);break;        //得到数据
                    }
                    else
                    ...{
                        if(d==depth)...{break};d+=1;
                    }
                    t = t.parentNode;
                }
                while(t.tagName.toLowerCase()!="body")    // body强制退出
            }
            return arr;
        }
    }
}
window.onload = function()
...{
    var aa = new opCard();
    aa.bind = ["a1","div","b1","div"];
    aa.style = ["a1_0","a1_1","a1_0"];
    aa.index = 0;
    aa.nesting = [false,true,"",""]
    aa.creat();
    aa =null;
    
    // 默认的onclick中，第一个例子
    var bba = new opCard();
    bba.bind = ["a2","li","b2","div"];
    bba.style = ["style1","style2","style3"];
    bba.overStyle = true;
    bba.creat();
    bba = null;
    
    // 默认的onclick中，第二个例子
    var bbb = new opCard();
    bbb.bind = ["a3","li","b3","div"];
    bbb.style = ["style1","style2","style3"];
    bbb.overStyle = true;
    bbb.creat();
    bbb = null;
    
    // onmousover触发中的例子
    var cc = new opCard();
    cc.bind = ["a4","li","b4","div"];
    cc.style = ["style1","style2","style3"];
    cc.overStyle = true;
    cc.overChange = true;
    cc.creat();
    cc = null;
    
    //自动播放auto第一个例子
    var dd = new opCard();
    dd.bind = ["a5","li","b5","div"];
    dd.style = ["style1","style2","style3"];
    dd.auto = [true, 3000];
    dd.creat();
    dd = null;
    
    //自动播放auto第二个例子
    var ee = new opCard();
    ee.bind = ["a6","li","b6","div"];
    ee.style = ["style1","style2","style3"];
    ee.auto = [true, 2000];
    ee.overChange = true;
    ee.creat();
    ee = null;
    
    //自动播放auto第三个例子
    var ff = new opCard();
    ff.bind = ["a7","li","b7","div"];
    ff.style = ["style1","style2","style3"];
    ff.auto = [true, 1000];
    ff.overChange = true;
    ff.overStyle = true;
    ff.creat();
    ff = null;
    
    //菜单导航例子
    var gg = new opCard();
    gg.bind = ["a8","li","b8","div"];
    gg.style = ["style1","style2","style3"];
    gg.overStyle = true;
    gg.menu = true;
    gg.creat();
    gg = null;
    
    //其他应用
    var hh = new opCard();
    hh.bind = ["a9","li","a9","li"];
    hh.style = ["style4","style4","style4"];
    //hh.overStyle = true;
    hh.auto = [true, 1000];
    hh.creat();
    hh = null;
}
</ script >
< style  type ="text/css" > ...
body{...}{font-size:12px; font-family:Verdana,"宋体";}
p,ul{...}{margin:0px; padding:0px;}
td,div{...}{font-size:12px}
.a1_0 {...}{border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {...}{border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{...}{text-decoration:underline;}
#b1 div.s{...}{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{...}{color:#0066FF;}
/**//* */
.style1{...}{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{...}{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{...}{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {...}{height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{...}{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{...}{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{...}{margin-right:20px;}
.style4{...}{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</ style >
</ head >
< body >
< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >
   < tr >
     < td  id ="a1"  width ="140"  valign ="top"  align ="center" >
         < div  class ="test" > 简单介绍 </ div >
         < div  class ="test" > 默认的onclick </ div >
         < div  class ="test" > onmousover触发 </ div >
         < div  class ="test" > 自动播放auto </ div >
         < div  class ="test" > 菜单导航 </ div >
         < div  class ="test" > 关于嵌套 </ div >
         < div  class ="test" > 其他应用 </ div >
         < div  class ="test" > 一些说明 </ div >
         < div  class ="test" > &nbsp; </ div >
         < div  class ="test" > &nbsp; </ div >
         < div  class ="test" > &nbsp; </ div >
         < div  class ="test" > &nbsp; </ div >
     </ td >
     < td  id ="b1"  valign ="top" >
         < div  class ="s" >
            封装了一个选项卡，不过已经不像选项卡了-_-!!! < br >< br >
            现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些 < br >< br >
             < p >
             < strong > obj.bind = ["a1","td","b1","div"]; </ strong >< br >
            绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？ < br >
            td标签的数量和div标签的数量必须相同 < br >
            （若不需要显示内容，只显示菜单话，可以这个在td标签上加 &lt; td skip="true" &gt; ） < br >
            如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting < br >< br >
            
             < strong > obj.nesting = [false,true,"",""]; </ strong >< br >
            当标签tag有嵌套时，需要用到这个 < br >
            比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到 < br >
            菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了 < br >
            判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断 < br >
            但有些情况下，这样还是不行 < br >
            我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"]; < br >
            这样就肯定不会错了（不明白的话看下例子就简单多了） < br >< br >
            
             < strong > obj.index = 0; </ strong >< br >
            默认显示第几个选项卡，序号从0开始 < br >< br >
            
             < strong > obj.style = ["c1","c2","c3"] </ strong >< br >
            菜单加载的样式的className： < br >
            菜单未选中的className是c1 < br >
            菜单选中的className是c2 < br >
            菜单onmouseover的className是c3 < br >< br >
            
             < strong > obj.overStyle = false; </ strong >< br >
            选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2] < br >< br >
            
             < strong > obj.overChange = false; </ strong >< br >
            选项卡内容是否用onmouseover, onmouseout直接激活 < br >< br >
            
             < strong > obj.menu = false; </ strong >< br >
            选项卡是菜单类型 < br >< br >
             < strong > obj.auto = [false, 1000]; </ strong >< br >
            选项卡是否自动播放，播放速度（毫秒） < br >< br >
            
             < strong > obj.creat(); </ strong >< br >
            开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名) < br >
            所有的都会触发
             </ p >
         </ div >
         < div  class ="s" >
         <!-- 默认的onclick中，第一个例子 -->
           < div  id ="a2" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li > 3 </ li >
               < li > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b2" >
             < div > 这个例子是用onclick触发的 < br > 并设置overStyle = true; < br > (over，out改变样式,但不激活) </ div >
             < div >
                var bba = new opCard(); < br >
                bba.bind = ["a2","li","b2","div"]; < br >
                bba.style = ["style1","style2","style1"]; < br >
                bba.overStyle = true; < br >
                bba.creat(); < br >
                bba = null;
             </ div >
             < div > 33333 </ div >
             < div > 4444444 </ div >
           </ div >< br >
         <!-- 默认的onclick中，第二个例子 -->
           < div  id ="a3" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li > 3 </ li >
               < li  skip ="true" > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b3" >
             < div >
                这个例子是比上面增加skip="true" < br > 即 &lt; li skip="true" &gt; 4 &lt; /li &gt; < br > 所以选项卡4是没有内容的 < br >
                你可以为选项卡的文字直接加上链接，我这里就不加了
             </ div >
             < div > 222222 </ div >
             < div > 33333 </ div >
             < div > 4444444 </ div >
           </ div >
         </ div >
         < div  class ="s" >
         <!-- onmousover触发中的例子 -->
           < div  id ="a4" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li  skip ="true" > 3 </ li >
               < li > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b4" >
             < div > 这个例子是用onmouseover触发的 < br > (over，out直接激活) < br > 并且 &lt; li skip="true" &gt; 3 &lt; /li &gt; [选项卡3不会被激活] < br > overStyle = true; </ div >
             < div >
                var cc = new opCard(); < br >
                cc.bind = ["a4","li","b4","div"]; < br >
                cc.style = ["style1","style2","style1"]; < br >
                cc.overStyle = true; < br >
                cc.overChange = true; < br >
                cc.creat(); < br >
                cc = null;
             </ div >
             < div > 33333 </ div >
             < div > 4444444 </ div >
           </ div >
         </ div >
         < div  class ="s" >
         <!-- 自动播放auto第一个例子 -->
           < div  id ="a5" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li > 3 </ li >
               < li > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b5" >
             < div > 1111111 < br > 我每3秒切换一个选项卡 </ div >
             < div >
                var ee = new opCard(); < br >
                ee.bind = ["a6","li","b6","div"]; < br >
                ee.style = ["style1","style2","style1"]; < br >
                ee.auto = [true, 2000]; < br >
                ee.overChange = true; < br >
                ee.creat(); < br >
                ee = null;
             </ div >
             < div > 33333 < br > 我每3秒切换一个选项卡 </ div >
             < div > 4444444 < br > 我每3秒切换一个选项卡 </ div >
           </ div >
           < div > 注： < strong > 鼠标在选项卡任意位置都会使停止播放 </ strong >< br >< br > 下面这个结合overChange一起 </ div >
           <!-- 自动播放auto第二个例子 -->
           < div  id ="a6" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li > 3 </ li >
               < li > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b6" >
             < div > 1111111 < br > 我每2秒切换一个选项卡 </ div >
             < div >
                var dd = new opCard(); < br >
                dd.bind = ["a5","li","b5","div"]; < br >
                dd.style = ["style1","style2","style1"]; < br >
                dd.auto = [true, 3000]; < br >
                dd.creat(); < br >
                dd = null; < br >
             </ div >
             < div > 33333 < br > 我每2秒切换一个选项卡 </ div >
             < div > 4444444 < br > 我每2秒切换一个选项卡 </ div >
           </ div >
           < div >< br > 下面这个再来个 &lt; li skip="true" &gt; 3 &lt; /li &gt; ，且overStyle=true; </ div >
           <!-- 自动播放auto第三个例子 -->
           < div  id ="a7" >
             < ul >
               < li > 1 </ li >
               < li > 2 </ li >
               < li  skip ="true" > 3 </ li >
               < li > 4 </ li >
             </ ul >
           </ div >
           < div  id ="b7" >
             < div > 1111111 < br > 我每1秒切换一个选项卡 </ div >
             < div >
                var ff = new opCard(); < br >
                ff.bind = ["a7","li","b7","div"]; < br >
                ff.style = ["style1","style2","style1"]; < br >
                ff.auto = [true, 1000]; < br >
                ff.overChange = true; < br >
                ff.overStyle = true; < br >
                ff.creat(); < br >
                ff = null;
             </ div >
             < div > 33333 < br > 我每1秒切换一个选项卡 </ div >
             < div > 4444444 < br > 我每1秒切换一个选项卡 </ div >
           </ div >
         </ div >
         <!-- 菜单导航的例子 -->
         < div  class ="s" >
           < div  id ="a8" >
             < ul >
               < li  skip ="true" > 首页 </ li >
               < li > 新闻 </ li >
               < li > 论坛 </ li >
               < li  skip ="true" > 联系我们 </ li >
             </ ul >
           </ div >
           < div  id ="b8" >
             < div ></ div >
             < div >< a  href ="#" > 国内新闻 </ a >< a  href ="#" > 国际新闻 </ a >< a  href ="#" > 娱乐新闻 </ a >< a  href ="#" > 体育新闻 </ a ></ div >
             < div >< a  href ="#" > 蓝色理想 </ a >< a  href ="#" > blue idea </ a ></ div >
             < div ></ div >
           </ div >
           < div >< strong > 注：菜单延时一秒关闭 </ strong >< br > 这里只是演示，实际可以设置下position什么的。-o- < br > 多级菜单不知道能不能支持，没试过 </ div >
         </ div >
         < div  class ="s" >
            我见过的许多选项卡都不能用来嵌套 < br > 但还是有些时候会用到的 < br >
            所以如您所见，这个演示本身就是一个嵌套，效果还不错
         </ div >
         <!-- 其他应用 -->
         < div  class ="s" >
            比如图片切换什么，不过我太懒了，不写了。。。 < br >
            这个能干什么，我也不知道。。
             < div  id ="a9" >
               < li > 新年好啊 </ li >
               < li > 快过年了 </ li >
               < li > 天好冷啊 </ li >
               < li > 大家去抢红包吧 </ li >
               < li > 红包~！红包~！你在哪里啊？ </ li >
             </ div >             
            
         </ div >
         < div  class ="s" >
            选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错 < br > 即使选项卡菜单skip="true"，内容也要放一个空的标签占位 < br >
            其他好像暂时没发现什么 < br >< br >
            本来打算加入ajax的，但有些还没想好。 < br >
            效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错 < br >< br >
            写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异 < br >
            本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。 < br >< br >
            
            哦，还有选项卡是附加样式，不会取消原本设置的样式 < br >
            如左边的下划线是原有的样式
         </ div >
         < div  class ="s" > 啥都没有1 </ div >
         < div  class ="s" > 啥都没有2 </ div >
         < div  class ="s" > 啥都没有3 </ div >
         < div  class ="s" > 啥都没有4 </ div >
     </ td >
   </ tr >
</ table >
</ body >
</ html >

摘编自【http://bbs.blueidea.com/thread-2829065-1-1.html】