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实现隐藏显示的代码。

  • 相关阅读:
    解决execjs 调用js 问题
    处理 get请求套字典问题
    js2py js逆向
    前端页面自适应
    newspaper抓新闻
    easygui
    pycharm 安装插件
    scrapy_代理使用
    SQLAlchemy 介绍,建表,及表的操作 (增 删 改 查)
    数据分析之pandas模块下
  • 原文地址:https://www.cnblogs.com/ahthw/p/4097430.html
Copyright © 2011-2022 走看看