多种Table选项卡封装

代码

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
< 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( " 菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。 " )}
        
         //  修正
         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 >

 

转载于:https://www.cnblogs.com/Tokyo/archive/2010/07/20/1781684.html