首页 > Web开发 > 详细

jQuery按键事件响应的Demo

时间:2015-09-16 17:57:45      阅读:237      评论:0      收藏:0      [点我收藏+]

<!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>

jQuery按键事件响应的Demo

原文:http://www.cnblogs.com/koleyang/p/4813832.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!