zoukankan      html  css  js  c++  java
  • 5.1点击4个按钮显示相应的div

    事件:onclick

    属性:display,className

    用到for语句,index标记,this当前事件

    先清空后附加

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <link href="css1.css" rel="stylesheet" type="text/css"
    charset="UTF-8">
    </head>
    <body>
    <div id="div1">
    <input class="active" type="button" value="服装"/>
    <input type="button" value="家具"/>
    <input type="button" value="运动"/>
    <input type="button" value="提醒"/>
    <div>女装,男装,童装</div>
    <div>家具用品</div>
    <div>户外运动</div>
    <div>注意事项</div>
    </div>
    <script src="js1.js"> </script>
    </body>
    </html>

    /////////////////css

    #div1 .active{
    background:yellow;
    }
    #div1 div{
    200px;
    height:200px;
    border:1px red solid;
    background:#ccc;
    display:none;
    }

    /////////////////////////js

    window.onload=function(){
    var oDiv=document.getElementById("div1");
    var oBtn=oDiv.getElementsByTagName("input");
    var aDiv=oDiv.getElementsByTagName("div");
    for(var i=0;i<oBtn.length;i++){
    oBtn[i].index=i;
    oBtn[i].onclick=function(){
    for(var i=0;i<oBtn.length;i++){
    oBtn[i].className="";
    aDiv[i].style.display="none";
    };
    this.className="active";
    aDiv[this.index].style.display="block";
    };

    }
    };

  • 相关阅读:
    AJAX注册
    文件上传加水印
    邮箱
    AJAX完整操作
    跨窗体操作
    容器布局
    EF异常类
    SQL查出字段横向拼接,如:1,2,3,4
    asp.net三层结构中,SQL助手类DbHelperSQL
    正则抓取页面信息
  • 原文地址:https://www.cnblogs.com/luxiaoli/p/8505433.html
Copyright © 2011-2022 走看看