• 选项卡重用


    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #box1,
    #box2 {
    300px;
    height: 300px;
    margin: 20px auto;
    border: #000 2px solid;
    font-family: "微软雅黑";
    }
    #box1 a,
    #box2 a {
    display: block;
    float: left;
    100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: green;
    color: #fff;
    text-decoration:none;
    }

    #box1 div,
    #box2 div {
    300px;
    height: 260px;
    line-height:260px;
    text-align: center;
    font-size:40px;
    display: none;
    }

    #box1 a.active,
    #box2 a.active {
    background: blue;
    }
    </style>
    <script>
    window.onload=function(){
    tab('box1','onclick');
    tab('box2','onmouseover');

    };
    function tab(id,sEv){
    var oBox=document.getElementById(id);
    var aBtn=oBox.getElementsByTagName('a');
    var aDiv = oBox.getElementsByTagName('div');
    for(var i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i][sEv]=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="box1">
    <a href="javascript:;" class="active">按钮1</a>
    <a href="javascript:;" >按钮2</a>
    <a href="javascript:;" >按钮3</a>
    <div style="display:block;">div1</div>
    <div>div2</div>
    <div>div3</div>
    </div>
    <div id="box2">
    <a href="javascript:;" class="active">按钮1</a>
    <a href="javascript:;" >按钮2</a>
    <a href="javascript:;" >按钮3</a>
    <div style="display:block;">div1</div>
    <div>div2</div>
    <div>div3</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    S1 商品信息管理系统
    用例图
    mvc使用mongodb时objectId序列化与反序列化
    windows下检測文件改变
    【Android 开发实例】时间管理APP开发之数据库设计
    设计模式 之 原型
    ANT安装及配置
    Java环境变量设置
    Win7安装软件,界面上中文显示乱码的解决方案
    Some perl tips
  • 原文地址:https://www.cnblogs.com/HUANGRONG888/p/6063574.html
Copyright © 2020-2023  润新知