tab切换☆☆☆☆☆

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
    *{
       margin:0;
       padding: 0;
    }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            text-align: center;
            line-height: 200px;
            display: none;
        }
        #div1{
            display: block;
        }
        button{
           display: inline;
           width: 100px;
           height: 20px;
           margin-right: -4px;/*去掉多个按钮之间默认的间距*/
        }
    </style>
    <script>
        window.onload=function(){
            var aInput=document.getElementsByTagName('button');
            var oDiv=document.getElementsByTagName('div');
            var n=0;
            for(var i = 0;i < aInput.length;i++){
                aInput[i].index=i;
                aInput[i].onclick=function(){
                    aInput[n].style.background="";//先把下标为0的按钮背景颜色清空
                    oDiv[n].style.display="none";
                    this.style.background="red";//点击当前的按钮，给当前按钮一个红色背景
                    oDiv[this.index].style.display="block";
                    n=this.index;
                }
            }
        }
    </script>
</head>
<body>
        <button style="background: red;"/>tab1</button>
        <button>tab2</button>
        <button>tab3</button>
        <div id="div1">
           我是tab1里的内容
        </div>
        <div>
           我是tab2里的内容
        </div>
        <div>
           我是tab3里的内容
        </div>
</body>
</html>
巴特西

tab切换☆☆☆☆☆

最新文章

热门文章
