zoukankan      html  css  js  c++  java
  • jQuery按键事件响应的Demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery演示框架页</title>
        <!-- <link rel="stylesheet" href="../css/green.css" media="screen" /> -->
        <link rel="stylesheet" href="../css/blue.css" media="screen" />
        <script src="../jquery-1.10.2.min.js"></script>
        <script src="../jquery.hotkeys.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <h1>jQuery Playground</h1>
            <ul id="nav">
                <li><a href="#" class="current" name="welcome">测试(c)</a></li>
                <li><a href="#" name="about">关于(a)</a></li>
            </ul>
            <div id="content">
            <div id="welcome">
                <h2>WelCome!</h2>
                <p>Hello,everyone.I will share some useful tips of jQuery here.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div id="about" style="display:none;">
                <h2>About us!</h2>
                <p>Hello,everyone.I will share some useful tips of jQuery here.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>    
                
            </div>
            <div id="footer">Powered By Dennis Ji.</div>
        </div>
    </body>
    <script>
        $(function(){
            $("#nav li a").each(function(){
                $(this).click(function(){
                    var content = "#"+$(this).attr("name");
                    $("#content>div").css("display","none");
                    $(content).css("display","block");
                });
            });
            // jQuery.hotkeys.add('c',function(){报错78行
            //     alert('c');
            // });
            $(document).keypress(function(e){
                
                if (e.which == 97) {
                    // alert("a");
                    $("#content>div").css("display","none");
                    $("#about").css("display","block");
                };
                return false;
            });
            $(document).keypress(function(e){
                
                if (e.which == 99) {
                    // alert("c");
                    $("#content>div").css("display","none");
                    $("#welcome").css("display","block");
                };
                return false;
            });
            // $(document).bind("keyup",'a',function(){
            //     // $("#content>div").css("display","none");
            //     // $("#about").css("display","block");
            //     alert("a");
            //     return false;
            // });
        });
    </script>
    </html>

  • 相关阅读:
    php 文件直接下载
    公钥、私钥与数字签名
    php swoole 安装与使用
    06-Ubuntu18.04&16.04安装PHP(7.0|7.1|7.2|7.3)
    解决nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)错误
    浏览器禁用返回按钮
    js 鼠标放上选中
    vue 组件切换
    VSCode常用设置
    How to use electron-builder in a Vue project
  • 原文地址:https://www.cnblogs.com/koleyang/p/4813832.html
Copyright © 2011-2022 走看看