Tab切换选项卡

左手的ㄟ右手 2022-05-09 06:58 423阅读 0赞 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Tab切换选项卡</title>
  6. <style>
  7. #div1 .active {background:yellow;}
  8. #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
  9. </style>
  10. <script>
  11. //此处编写代码，实现tab标签,鼠标单击某个按钮显示对应的
  12.     window.onload=function (){
  13.                 var oDiv=document.getElementById('div1');
  14.                 var aBtn=oDiv.getElementsByTagName('input');
  15.                 var aDiv=oDiv.getElementsByTagName('div');
  18.                 for(var i=0;i<aBtn.length;i++){            
  20.                     aBtn[i].index=i;            
  21.                     aBtn[i].onclick=function (){
  23.                         for(var i=0;i<aBtn.length;i++){    
  24.                             aBtn[i].className='';
  25.                             aDiv[i].style.display='none';
  26.                         }
  27.                         this.className='active';
  28.                         aDiv[this.index].style.display='block';
  29.                     }
  30.                 }
  31.             }
  32. </script>
  33. </head>
  35. <body>
  36. <div id="div1">
  37.     <input class="active" type="button" value="教育" />
  38.     <input type="button" value="培训" />
  39.     <input type="button" value="招生" />
  40.     <input type="button" value="出国" />
  41.     <div style="display:block;">教育</div>
  42.     <div>培训</div>
  43.     <div>招生</div>
  44.     <div>出国</div>
  45. </div>
  46. </body>
  47. </html>

70

发表评论

表情：
评论列表 （有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

    相关 tab选项卡

    tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

    た 入场券た 入场券/ 0 赞/ 548 阅读