• 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>
    

      

  • 相关阅读:
    uni-app拒绝授权后再次授权
    vue触底操作
    vue滚动条滚到到底部触发的方法
    pagination插件使用例子
    修改后台返回数据的字段
    v-cloak指令的作用
    修改checkbox样式
    获取selected的值
    前端工程师必备的几个实用网站
    html发展史简介(摘抄)
  • 原文地址:https://www.cnblogs.com/alphafly/p/3766685.html
Copyright © 2020-2023  润新知