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>

  • 相关阅读:
    [比赛|考试]9.21上午考试
    给花_Q
    [比赛|考试] 9.17下午考试
    [比赛|考试]nowcoder NOIP提高组组第二场
    图论
    生成函数
    P4197 Peaks
    3942: [Usaco2015 Feb]Censoring
    P2245 星际导航
    P3565 [POI2014]HOT-Hotels
  • 原文地址:https://www.cnblogs.com/koleyang/p/4813832.html
Copyright © 2011-2022 走看看