js实现tab效果的源代码代码

tab的代码有很多写法，其实它的原理很简单：当鼠标滑过或单击tab时，相应的panel就显示，其它panel隐藏。我想不用Jquery，并且，函数用最少的参数-一个参数（你单击tab的索引值），在WinFormc程序中也有这种组件。

     在写代码的过程中，遇到的一个问题是HtmlObject的childNodes属性在不同浏览器中得到不同值（主要IE、FF），在FF标签结束的所有其它的也算是HtmlObject的子元素。所以必须处理一下。

　　XHTML代码结构：

代码

  1  < div  class ="introCon"  id ="tab" >
  2           < ul  class ="tabs tc"   >
  3               < li >< a  href ="#"  class ="selected"  onmouseover ="switchTab('tab',1);" > Oracle认证 </ a ></ li >
  4               < li  class ="split" ></ li >
  5               < li >< a  href ="#"  onmouseover ="switchTab('tab',2);" > 3G培训 </ a ></ li >
  6               < li  class ="split" ></ li >
  7               < li >< a  href ="#"  onmouseover ="switchTab('tab',3);" > 职业教育 </ a ></ li >
  8               < li  class ="split" ></ li >
  9               < li >< a  href ="#"  onmouseover ="switchTab('tab',4);" > Intel培训 </ a ></ li >
 10               < li  class ="split" ></ li >
 11               < li >< a  href ="#"  onmouseover ="switchTab('tab',5);" > 考试中心 </ a ></ li >
 12               < li  class ="split" ></ li >
 13               < li >< a  href ="#"  onmouseover ="switchTab('tab',6);" > 网络课程 </ a ></ li >
 14               < li  class ="split" ></ li >
 15               < li >< a  href ="#"  onmouseover ="switchTab('tab',7);" > 企业内训 </ a ></ li >
 16           </ ul >
 17           < div  class ="panel" >
 18               < ul  >
 19                   < li > Oracle认证课程一 </ li >
 20                   < li > Oracle认证课程二 </ li >
 21                   < li > Oracle认证课程三 </ li >
 22                   < li > Oracle认证课程四 </ li >
 23               </ ul >
 24               < div  class ="details" >
 25                   < p > 11Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 26  </ p >
 27                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 28               </ div >
 29           </ div >
 30           < div  class ="panel" >
 31               < ul  >
 32                   < li > Oracle认证课程一 </ li >
 33                   < li > Oracle认证课程二 </ li >
 34                   < li > Oracle认证课程三 </ li >
 35                   < li > Oracle认证课程四 </ li >
 36               </ ul >
 37               < div  class ="details" >
 38                   < p > 22Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 39  </ p >
 40                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 41               </ div >
 42           </ div >
 43           < div  class ="panel" >
 44               < ul  >
 45                   < li > Oracle认证课程一 </ li >
 46                   < li > Oracle认证课程二 </ li >
 47                   < li > Oracle认证课程三 </ li >
 48                   < li > Oracle认证课程四 </ li >
 49               </ ul >
 50               < div  class ="details" >
 51                   < p > 33Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 52  </ p >
 53                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 54               </ div >
 55           </ div >
 56           < div  class ="panel" >
 57               < ul  >
 58                   < li > Oracle认证课程一 </ li >
 59                   < li > Oracle认证课程二 </ li >
 60                   < li > Oracle认证课程三 </ li >
 61                   < li > Oracle认证课程四 </ li >
 62               </ ul >
 63               < div  class ="details" >
 64                   < p > 44Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 65  </ p >
 66                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 67               </ div >
 68           </ div >
 69           < div  class ="panel" >
 70               < ul  >
 71                   < li > Oracle认证课程一 </ li >
 72                   < li > Oracle认证课程二 </ li >
 73                   < li > Oracle认证课程三 </ li >
 74                   < li > Oracle认证课程四 </ li >
 75               </ ul >
 76               < div  class ="details" >
 77                   < p > 55Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 78  </ p >
 79                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 80               </ div >
 81           </ div >
 82           < div  class ="panel" >
 83               < ul  >
 84                   < li > Oracle认证课程一 </ li >
 85                   < li > Oracle认证课程二 </ li >
 86                   < li > Oracle认证课程三 </ li >
 87                   < li > Oracle认证课程四 </ li >
 88               </ ul >
 89               < div  class ="details" >
 90                   < p > 66Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
 91  </ p >
 92                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
 93               </ div >
 94           </ div >
 95           < div  class ="panel" >
 96               < ul  >
 97                   < li > Oracle认证课程一 </ li >
 98                   < li > Oracle认证课程二 </ li >
 99                   < li > Oracle认证课程三 </ li >
100                   < li > Oracle认证课程四 </ li >
101               </ ul >
102               < div  class ="details" >
103                   < p > 77Oracle认证定位于高端的IT培训，为社会培养了大量的IT高端人才，也为各类IT从业人员及企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。企业提供最前沿的IT技术，提高信息洞察力，提升IT管理技能。 < a  href ="#" > >>>更多 </ a >
104  </ p >
105                   < p >< a  href ="#" > 项目介绍 </ a >  |  < a  href ="#" > 最新开班 </ a >  |  < a  href ="#" > 师资介绍 </ a >  |  < a  href ="#" > 相关活动 </ a >  |  < a  href ="#" > 优秀学员 </ a >  |  < a  href ="#" > 相关招聘 </ a ></ p >
106               </ div >
107           </ div >
108       </ div >
109       < div  class ="intro_r" >
110           < div  class ="blank11" ></ div >
111           < div  class ="online" >
112               < span > 在线客户： </ span >
113               < a  href ="#" >< img  src ="pics/qq-1.jpg"  alt ="" /></ a >
114               < a  href ="#" >< img  src ="pics/qq-2.jpg"  alt ="" /></ a >
115               < a  href ="#" >< img  src ="pics/qq-3.jpg"  alt ="" /></ a >
116               < a  href ="#" >< img  src ="pics/qq-4.jpg"  alt ="" /></ a >
117           </ div >
118           < div  class ="blank" ></ div >
119           < div  class ="contact" >
120               < h2 > 联系我们 </ h2 >
121               < div  class ="content" >
122                   < p > 教育热线：021-62932189 </ p >
123                   < p > 邮箱：oracle@onlinesjtu.com </ p >
124                   < address > 地址：上海市江苏路500号电 < span > 信世界5楼511室 </ span ></ address >
125                   < p > 客服QQ：1071204206 </ p >
126               </ div >
127           </ div >
128       </ div >
129  </ div >

　　css代码省略。。。

　　javascript代码：

代码

function  $(id){
         return   typeof  id == " string " ? document.getElementById(id):id;
    }
     /*  获取对象的所有子女  */
     function  getChilds(parent){
         var  nodes = parent.childNodes;
         var  childs = new  Array();
         for ( var  num = 0 ;num < nodes.length;num ++ ){
             if (nodes[num].nodeName == " #text " )
                 continue ;
             else
                childs.push(nodes[num]);
        }
         return  childs;
    }
     /*  选项卡效果  */
     function  switchTab(id,index){
         var  panels = getChilds($(id));
         var  tabs = panels[ 0 ].getElementsByTagName( " a " );
         for ( var  i = 1 ;i < tabs.length;i ++ ){
             if (i == index){
                tabs[i - 1 ].className = " selected " ;
                panels[i].style.display = " block " ;
            }
             else {
                panels[i].style.display = " none " ;
                tabs[i - 1 ].className = "" ;
            }
        }
    }

转载于:https://www.cnblogs.com/cyy321/archive/2010/08/23/1806617.html