zoukankan      html  css  js  c++  java
  • Javascript 选项卡

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            #div1 .active
            {
                background: yellow;
            }
    
            #div1 div
            {
                 200px;
                height: 200px;
                background: #808080;
                border: 1px solid #f00;
                display: none;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                var oDiv = document.getElementById("div1");
                var aBtn = oDiv.getElementsByTagName("input");
                var aDiv = oDiv.getElementsByTagName("div");
    
                for (var i = 0; i < aBtn.length; i++) {
                    //给每一个按钮增加一个Index属性
                    aBtn[i].index = i;
                    //给按钮增加事件
                    aBtn[i].onclick = function () {
                        //先把所有的btn的class改成无
                        for (var j = 0; j < aBtn.length; j++) {
                            aBtn[j].className = '';
                            aDiv[i].style.display = 'none';
                        }
                        //当前点击的按钮是this
                        this.className = "active";
                        alert(this.index);
                        //aDiv[this.index].style.display = 'block';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <input type="button" class="active" value="教育" />
            <input type="button" value="培训" />
            <input type="button" value="招生" />
            <input type="button" value="出国" />
            <div style="display: block">11111111</div>
            <div>22222222</div>
            <div>33333333</div>
            <div>44444444</div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    php命令注入
    mysql事物
    安装php环境
    移除服务器缓存实例
    show user profile synchronization tools
    manual start user profile import
    JSON is undefined. Infopath Form People Picker in SharePoint 2013
    asp.net web 应用站点支持域账户登录
    Load sharepoint envirement by powershell
    sharepoint 2016 download
  • 原文地址:https://www.cnblogs.com/alphafly/p/3766685.html
Copyright © 2011-2022 走看看