jQuery web键盘操作

最新推荐文章于 2021-07-22 11:08:44 发布

zhangrong_108

最新推荐文章于 2021-07-22 11:08:44 发布

阅读量134

点赞数

文章标签： Web jQuery CSS JavaScript XHTML ViewUI

本文介绍了一个使用jQuery实现的简单页面导航示例。通过键盘按键或点击导航链接，可以在不同的页面区块间进行切换。此示例利用了jQuery的选择器和事件处理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Playground</title>
	<link title="green" media="screen" href="css/green.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	           $(document).ready(function(){
		// hides all DIVs with the CLASS container
		// and displays the one with the ID 'home' only
		$(".container").css("display","none");
		$("#home").css("display","block");
	
		// makes the navigation work after all containers have bee hidden 
		showViaLink($("ul#nav li a"));
	
		// listens for any navigation keypress activity
	          $(document).keypress(function(e){
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;							
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;			
			// user presses the "f" key 
			case 102:	showViaKeypress("#links");
		}
	         });
                   });

                         // shows a given element and hides all others
                         function showViaKeypress(element_id){
	                 $(".container").css("display","none");
	               // if multiple keys are pressed rapidly this will hide all but the last pressed key's div
	                $(".container").hide(1);
	                $(element_id).slideDown("slow");
                    }

                        // shows proper DIV depending on link 'href'
                           function showViaLink(array){
	                  array.each(function(i)   {	
		        $(this).click(function(){
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	            });
                  }
	</script>
</head>
<body>
<div id="wrapper">
		<h1>jQuery Playground</h1>
		<ul id="nav">
			<li><a href="#home">主页(a)</a></li>
			<li><a href="#about">介绍(s)</a></li>
			<li><a href="#contact">联系(d)</a></li>
			<li><a href="#links">链接(f)</a></li>
		</ul>
		<div id="home" class="container">
			<h2>主页</h2>
			<input type="text" /><br/>
			
		</div>
		<div id="about" class="container">
			<h2>介绍</h2>
		</div>
		<div id="contact" class="container">
			<h2>联系</h2>
		</div>
		<div id="links" class="container">
			<h2>链接</h2>
		</div>
		<div id="foot">Powered By Dennis Ji.</div>
</div>
</body>
</html>