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>

  • 相关阅读:
    微信公众号内调用微信支付
    transform-translate3d
    Ubuntu16.04 install apache-flume-1.7.0-bin.tar.gz
    Ubuntu16.04 install apache-hive-2.X.X-bin.tar.gz
    Ubuntu16.04 install mysql5.X
    Ubuntu16.04 install hadoop-2.8.1.tar.gz伪分布式配置
    Ubuntu16.04 install jdk-8u144-linux-x64.tar.gz
    入门VMware Workstation下的Debian学习之Vim简单使用(三)
    入门VMware Workstation下的Debian学习之基本命令(二)
    Ubuntu16.04 install android-studio-ide-162.4069837-linux
  • 原文地址:https://www.cnblogs.com/koleyang/p/4813832.html
Copyright © 2011-2022 走看看