zoukankan      html  css  js  c++  java
  • 闭包写个选项卡

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="智能社 - zhinengshe.com">
    <meta name="copyright" content="智能社 - zhinengshe.com">
    <title>智能社 - www.zhinengshe.com</title>
    <style>
    input { 100px; height:30px; line-height:30px; }
    input.active { background:yellow; }
    
    #box div { display:none; 300px; height:300px; background:#ccc; }
    #box .active { display:block; }
    </style>
    <script>
    window.onload=function (){
        var aBtn=document.getElementsByTagName('input');
        var oDiv=document.getElementById('box');
        var aDiv=oDiv.getElementsByTagName('div');
    
        for (var i=0; i<aBtn.length; i++)
        {
            (function (index){
                aBtn[index].onclick=function (){
                    for (var i=0; i<aBtn.length; i++)
                    {
                        aBtn[i].className='';
                        aDiv[i].className='';
                    }
                    aBtn[index].className='active';
                    aDiv[index].className='active';
                };
            })(i);
        }
    };
    </script>
    </head>
    
    <body>
        <input type="button" value="新闻" class="active" />
        <input type="button" value="广播" />
        <input type="button" value="电影" />
    
        <div id="box">
            <div class="active">1111111111111</div>
            <div>2222222222222</div>
            <div>3333333333333</div>
        </div>
    </body>
    </html>
  • 相关阅读:
    一位区域销售经理百条经验手记
    PAIP.FLEX与JAVA数据对应关系.txt
    转:java生成EXCEL表格(POI vs JXL)
    逆向分析工具介绍
    applet与SERLET交互...
    AT命令集(
    关于WINDOWS超级终端的使用来调试MODEM,串口.
    poj1331
    poj1338
    poj1325
  • 原文地址:https://www.cnblogs.com/heboliufengjie/p/4792434.html
Copyright © 2011-2022 走看看