zoukankan      html  css  js  c++  java
  • JS 切换显示

    <style>
      #hhh div {    
        200px;
        height:200px;
        background:red;
        display:none;
        }

        #hhh input {
            background-color: white;
        }
        #hhh .active
        {background-color:green;
         
        }
       
    </style>



    <div id="hhh">

    <script >
        window.onload = function () {
            var abtn = $("input")
            var adiv = $("#hhh div");       
            var i = 0;        
            for (i = 0; i < abtn.length; i++)
            {
                abtn[i].index = i;
                abtn[i].onmousemove = function ()
                {
                    for (i = 0; i < abtn.length; i++) {
                        abtn[i].className = "";
                        adiv[i].style.display = "none";
                    };         
                    adiv[this.index].style.display="block";
                    this.className = "active";
                }
            }
        };

    </script>
    <input type="button" class="active" value="小杜" />
    <input type="button" value="张旭"/>
    <input type="button" value="赵帆"/>
        <div style="display:block">11111</div>
        <div>222222</div>
        <div>33333</div>
     </div>

  • 相关阅读:
    [k8s微服务作业]-day2-Docker基础
    运维常用命令记录
    【莫比乌斯反演】学习笔记
    2021牛客OI赛前集训营-提高组(第一场)
    NOIP 计划 · 模拟赛 #10
    2021牛客OI赛前集训营-提高组(第二场)
    10.5 模拟赛题解报告
    组合数学
    线段树合并
    2021, 9,26 模拟赛
  • 原文地址:https://www.cnblogs.com/isylar/p/3191103.html
Copyright © 2011-2022 走看看