标签页的切换方法（DOM）

效果：

1.点击[JAVA语言]

2.点击[C语言]

3.点击C++语言

代码：

   doctype html  > 
   html  > 
   head  > 
   meta   charset  ="utf-8"  > 
   title  > 标签页的切换   title  > 
   style  >  
*  {  margin  :  0  ;  padding  :  0  ;  }  
#tab li  {  
float  :  left  ;  
cursor  :   pointer  ;  
list-style-type  :  none  ;  
width  :  80px  ;  
height  :  40px  ;  
line-height  :  40px  ;  
text-align  :  center  ;  
cursor  :  pointer  ; 
 }  
#container  {  position  :  relative  ;  }  
#container1,#container2,#container3  {  
width  :  300px  ;  
height  :  100px  ;  
padding  :  30px  ;  
position  :  absolute  ;  
top  :  40px  ;  
left  :  0  ; 
 }  
#tab1,#container1  {  
background-color  :   red  ; 
 }  
#tab2,#container2  {  
background-color  :   green  ; 
 }  
#tab3,#container3  {  
background-color  :   blue  ; 
 } 
   style  > 

   script  > 
 function   show(n)
{
      var   x  =  document.querySelector(  "  div[style]  "  );
    x.removeAttribute(  "  style  "  );
    document.getElementById(  "  container  "  +  n).style.zIndex  =  "  1  "  ;
}
    script  > 

   head  > 
   body  > 
       ul   id  ="tab"  > 
           li   id  ="tab1"   onclick  ="show(1);"  > JAVA语言   li  > 
           li   id  ="tab2"   onclick  ="show(2);"  > C语言   li  > 
           li   id  ="tab3"   onclick  ="show(3);"  > C++语言   li  > 
       ul  > 
       div   id  ="container"  > 
           div   id  ="container1"   style  ="z-index: 1;"  > JAVA语言是现今世界上最流行的语言   div  > 
           div   id  ="container2"  > C语言是一种面向过程的语言   div  > 
           div   id  ="container3"  > C++语言是面向对象的语言   div  > 
       div  > 
   body  >  

查看更多关于标签页的切换方法（DOM）的详细内容...