zoukankan      html  css  js  c++  java
  • Javascript与jQuery方法的隐藏与显示

    如题,代码奉上。

    <html>
    <head>
    
    <title>denotoggle</title>
    
    <style>
    #box {
        width: 100px;
        height: 100PX;
        background-color: #ddd
    }
    
    .show {
        visibility: hidden;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
    <!-- //java script方法 -->
    <script type="text/javascript">
        window.onload = function() {
            function toglemain() {
                var obj = document.getElementById("box");
                if (obj.className == "") {
                    obj.className = "show";
                } else {
                    obj.className = "";
                }
            }
            var clickbutton = document.getElementById("toggle");
            clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。
        }
    </script>
    <!-- //jQuery Toggle方法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn1").click(function() {
                /* $("p#box").toggle(); */
                $("#box").toggleClass("show");
            });
        });
    </script>
    
    
    </head>
    
    <body>
        <div id="box"></div>
        <button id="toggle">javascript toggle</button>
        <button class="btn1">jQuery Toggle</button>
    </body>
    </html>

    另求大家补充个jQuery的addClass与remove实现隐藏显示的代码。

  • 相关阅读:
    loj6033.「雅礼集训 2017 Day2」棋盘游戏
    loj6032. 「雅礼集训 2017 Day2」水箱
    BZOJ 5217 [Lydsy2017省队十连测] 航海舰队
    P4173 残缺的字符串
    P3723 [AH2017/HNOI2017]礼物
    P3321 [SDOI2015]序列统计
    P4841 [集训队作业2013]城市规划
    MySQL基础
    MySQL查询
    HTTP响应码
  • 原文地址:https://www.cnblogs.com/ahthw/p/4097430.html
Copyright © 2011-2022 走看看