zoukankan      html  css  js  c++  java
  • Jquery——hover与toggle

    hover方法的语法结构为:hover(enter,leave)

     
    hover()当鼠标移动到元素上时,会触发第一个方法,当鼠标移开的时候会触发第二个方法
     
     
     
    复制代码
    <html>
        <head>
            <title>测试用</title>
            <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
            <script type="text/javascript">
                window.onload=init;
                function init(){
                    $("#panel h5.head").hover(function(){
                        $(this).next().hide();
                    },function(){
                        $(this).next("div .content").show();
                    });
                }
            </script>
     
        </head>
        <body>
        <div id="panel">
            <h5 class="head">什么事jquery</h5>
            <div class="content">
                 混蛋
            </div>
        </div>
     
        </body>
    </html>
     
    复制代码
     
     
    toggle(fn1,fn2,fn3..)这个方法是每次单击调用下一个方法,如果方法是最后一个,那么从第一个开始
     
    如果只有2个方法,则是互相切换效果。
     
     
    复制代码
    <html>
        <head>
            <title>测试用</title>
            <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
            <script type="text/javascript">
                window.onload=init;
                function init(){
                    $("#panel h5.head").toggle(function(){
                        $(this).addClass("highlight");
                        $(this).next().hide();
                    },function(){
                        $(this).removeClass("highlight");
                        $(this).next("div .content").show();
                    });
                 
     
                }
            </script>
            <style type="text/css">
                .highlight{
                    background:#ff3300;
                }
            </style>
        </head>
        <body>
        <div id="panel">
            <h5 class="head">什么事jquery</h5>
            <div class="content">
                 混蛋
            </div>
        </div>
     
        </body>
    </html>
  • 相关阅读:
    React项目升级遇到的问题复盘(2019-09-02)
    前端项目升级到React-router5中遇到的问题解决方案以及思路
    三行Jquery代码实现简单的选项卡
    开放-封闭原则
    单一职责原则
    简单工厂模式(c++实现)
    博客园使用MarkDown格式记录博客
    Qml 的Image对应的source不变,但是图片内容改变却不会刷新的解决方案
    Qt中第一请求web api连接返回缓慢问题
    Qt的pro文件工程配置
  • 原文地址:https://www.cnblogs.com/xiaofeng028/p/4175225.html
Copyright © 2011-2022 走看看