zoukankan      html  css  js  c++  java
  • tab切换☆☆☆☆☆

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
    *{
    margin:0;
    padding: 0;
    }
    div{
    300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
    line-height: 200px;
    display: none;
    }
    #div1{
    display: block;
    }
    button{
    display: inline;
    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>
  • 相关阅读:
    CF627A Xor Equation
    CF865C Gotta Go Fast
    HDU 2222 Keywords Search
    BZOJ 2038: [2009国家集训队]小Z的袜子(hose)
    BZOJ 3781: 小B的询问
    BZOJ 1086: [SCOI2005]王室联邦
    BZOJ 2120: 数颜色
    BZOJ 1503: [NOI2004]郁闷的出纳员
    BZOJ 3757: 苹果树
    BZOJ 1861: [Zjoi2006]Book 书架
  • 原文地址:https://www.cnblogs.com/heyiming/p/6086476.html
Copyright © 2011-2022 走看看