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>

  • 相关阅读:
    【其它】 数学是什么?
    【其它】 MathJax
    FreeCodeCamp练习笔记
    Docker容器操作中常用命令集合
    【转载】Ubuntu 系列安装 Docker
    U盘操作系统,Kali Linux操作系统安装
    网络安全&信息安全&系统安全常用名词汇总
    【CISP笔记】安全漏洞与恶意代码(2)
    【CISP笔记】安全漏洞与恶意代码(1)
    【CISP笔记】数据库及应用安全
  • 原文地址:https://www.cnblogs.com/koleyang/p/4813832.html
Copyright © 2011-2022 走看看