js选项卡简单切换

来源：互联网发布：天心erp软件编辑：程序博客网时间：2024/05/18 15:26
<!DOCTYPE html><html>    <head>        <title>TODO supply a title</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <style>            #div1 .active{background: yellow;}            #div1 div{width:200px; height: 200px; background: #CCC; border: 1px solid #66ff00;display: none;}        </style>        <script>window.onload = function(){    var oDiv=document.getElementById('div1');    var aBtn = oDiv.getElementsByTagName('input');    var aDiv = oDiv.getElementsByTagName('div');    for(var i =0;i<aBtn.length;i++)    {        aBtn[i].index =i;        aBtn[i].onclick = function()        {            for(var i=0;i<aBtn.length;i++){            aBtn[i].className='';            aDiv[i].style.display='none';            }          this.className = 'active';            aDiv[this.index].style.display='block';        };    }};        </script>    </head>    <body>        <div id="div1">            <input type="button" class="active" value="教育"/>            <input type="button"  value="招生"/>            <input type="button"  value="培训"/>            <input type="button"  value="人文"/>            <div style="display: block" >11111</div>            <div>22222</div>            <div>33333</div>            <div>4444</div>        </div>    </body></html>
0 0