js 选项卡制作

来源：互联网发布：淘宝上有没有异形服饰编辑：程序博客网时间：2024/06/07 23:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>选项卡</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>    #div1  .active{        background: yellow;    }    #div1 div{        width: 200px;        height: 200px;        background: gray;        display: none;    }</style><script>    window.onload=function(){        var odiv1 = document.getElementById('div1');        var oinp = odiv1.getElementsByTagName('input');        var odiv = odiv1.getElementsByTagName('div');        for(var i=0;i<oinp.length;i++){            oinp[i].index=i;                         //设置内容切换            oinp[i].onclick = function(){                for (var i =0; i <oinp.length; i++) {                     oinp[i].className="";                     odiv[i].style.display='none';                };                 this.className="active";                 odiv[this.index].style.display='block';            }        }    }</script></head>    <body>          <div id="div1">              <input type="button"  value="北京"  class="active"/>              <input type="button"  value="上海"/>              <input type="button"  value="深圳"/>              <div style="display:block;">北京是我们的首都。</div>              <div>上海的东方明珠很漂亮。</div>              <div>深圳是世界之窗。</div>          </div>    </body></html>
0 0