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>
  • 相关阅读:
    Linux驱动之USB(个人)
    iptables命令使用详解
    python操作mysql——mysql.connector
    linux下NFS实战
    CentOS6上ftp服务器搭建实战
    CentOS7下mariadb日常管理
    CentOS7配置httpd虚拟主机
    httpd常见配置
    常见加密算法
    HTTP安全通信:Https和SSL
  • 原文地址:https://www.cnblogs.com/heboliufengjie/p/4792434.html
Copyright © 2011-2022 走看看