zoukankan      html  css  js  c++  java
  • 用RadioButten(或CheckBox)实现div的显示与隐藏

    1,用RadioButten(或CheckBox)实现div的显示与隐藏

    <!DOCTYPE html>
    <html>
    <head runat="server">
    <title>
    用RadioButten(或CheckBox)实现div的显示与隐藏
    </title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <input id="Radio1" name="11" onclick="show2()" type="radio" checked="checked"/>

    <input id="Radio2" name="11" onclick="show2()" type="radio" />

    </div>
    <div id="nvInfo" style="display: block;">
    aaa
    </div>
    <div id="nvInfoa" style="display: none;">
    bbbb
    </div>
    </form>
    </body>
    <script language="javascript" type="text/javascript">
    function show2() {
    if (document.getElementById("Radio2").checked) {
    document.getElementById("nvInfo").style.display = "none";
    document.getElementById("nvInfoa").style.display = "block";
    }
    else {
    document.getElementById("nvInfo").style.display = "block";
    document.getElementById("nvInfoa").style.display = "none";
    }
    }
    </script>

    </html>

    2, 更换 radio 背景样式选中

    <!DOCTYPE html>
    <html>
    <head runat="server">
    <title>
    更换 radio 背景样式选中
    </title>
    <style type="text/css">
    #settledrunning{
    100%;
    height:79px;
    position: absolute;

    }
    .sex{
    25px;
    height: 25px;

    position: absolute;
    opacity: 0;
    z-index: 3;
    }
    .sex1{
    margin-left: 8px;
    margin-top: 5px;
    }
    .dianji{
    25px;
    height:25px;

    position: absolute;
    background: url("./image/checkBox_unCheck.png") no-repeat;
    z-index: 2;
    }
    .dianji1{
    margin-left: 8px;
    margin-top: 5px;
    }
    #settledrunning input:checked + .dianji{
    background: url("./image/checkBox_Check.png") no-repeat;
    }


    .settled{
    131px;
    height:38px;
    background: url(./image/btnBg.png) no-repeat;
    position: absolute;
    top: 15px;
    left: 50px;
    }
    .running{
    131px;
    height:38px;
    background: url(./image/btnBg.png) no-repeat;
    position: absolute;
    top: 15px;
    left: 195px;
    }
    .settled-txt{
    margin-top: 7px;
    margin-left: 42px;
    font-size: 13px;
    color: #153d6c;
    }

    .running-txt{
    margin-top: 7px;
    margin-left: 42px;
    font-size: 13px;
    color: #153d6c;
    }
    </style>

    </head>
    <body>
    <div id="settledrunning">
    <div class="settled">
    <input id="Radio1" onclick="show2()" checked="checked" class="sex sex1" name="sex" type="radio" value=""/>
    <div class="dianji dianji1"></div>
    <p class="settled-txt">Settled</p>
    </div>
    <div class="running">
    <input id="Radio2" onclick="show2()" class="sex sex1" name="sex" type="radio" value=""/>
    <div class="dianji dianji1"> </div>
    <p class="running-txt">Running</p>
    </div>
    </div>
    </body>

    </html>

  • 相关阅读:
    (转载)安装Android时Could not find D:\Android\a...sdkwindows\tools\adb.exe
    (转载)Exception in thread "main" java.lang.NoClassDefFoundError错误信息
    (转载)java函数参数类型后添加三点的用法
    (转载)一个fork的面试题
    javascript event事件再次封装了,兼容大多数浏览器
    SINA多功能弹窗已经摘出来
    Observer Design Pattern Using JavaScript
    CSS Hacks for IE,IE 也可以很完美
    N久前写的一个JSONP请求方法
    JS模拟滚动条雏形(待进一步规整)
  • 原文地址:https://www.cnblogs.com/xihehua/p/12867643.html
Copyright © 2011-2022 走看看