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>

  • 相关阅读:
    Go 好用第三方库
    Go 的beego 框架
    Go 的gin 框架 和 gorm 和 html/template库
    Go 常用的方法
    Dijkstra 的两种算法
    邻接矩阵
    next permutation 的实现
    最优二叉树 (哈夫曼树) 的构建及编码
    思维题— Count the Sheep
    STL— bitset
  • 原文地址:https://www.cnblogs.com/isylar/p/3191103.html
Copyright © 2011-2022 走看看