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>

  • 相关阅读:
    希腊字母
    word写文章时公式编号~~以后不要再浪费时间在这些事情上
    网络中的一些基本概念~~但很重要
    导师教给我们的~~
    ONE工具配置
    java环境变量设置
    【转载】UnicodeEncodeError: 'gbk' codec can't encode character 'xa0' in position XXX
    python中yield的用法详解——最简单,最清晰的解释【转载】
    python-乌龟和鱼游戏(面向对象实例)
    centOS7 使用yum命令报错:Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again
  • 原文地址:https://www.cnblogs.com/koleyang/p/4813832.html
Copyright © 2011-2022 走看看