在本文中我将為(wèi)您介紹如何偵聽(tīng)用戶鍵盤按鍵事件，通(tōng)過使用鍵盤來(lái)切換導航菜單，也為(wèi)用戶提供了方便，從而使導航功能更加實用。

XHTML

	
	

		
		

			首頁[A]
		

		

			關于[S]
		

		

			産品[D]
		

		

			服務[F]
		

		

			BLOG[G]
		

	




	
	

		Welcome!
	

	

		Some Text
	




	
	

		About me
	

	

		Some Text
	




	
	

		Product
	

	

		Some Text
	




	
	

		Service
	

	

		Some Text
	




	
	

		My Blog
	

	

		Some Text
	

創建一個(gè)包含導航菜單#nav和(hé)菜單對應的內(nèi)容.box，注意導航菜單中含有(yǒu)對應的字母就是要用到的鍵盤按鍵導航功能。

CSS

#nav{width:460px; margin:0 auto}
#nav ul{list-style:none; height:24px}
#nav ul li{float:left; font-size:14px; font-weight:bold}
#nav ul li a{display:block; color:#369; margin-right:20px}
#nav ul li a:hover{color:#f90}
.box{width:400px; height:300px; margin:20px auto; padding:10px 20px; line-height:22px}
.box h2{padding:5px 10px; width:200px; background:#9cf; color:#fff}
#home{background:#15add1}
#about{background:#fdc700}
#product{background:#f80083}
#service{background:#f18300}
#blog{background:#98c313}

以上(shàng)CSS代碼将導航菜單設置為(wèi)一行(xíng)，為(wèi)了演示，我給每個(gè)導航菜單對應的模塊內(nèi)容背景設置了不同的顔色。

jQuery

關鍵來(lái)看jQuery，首先要引用jquery庫，以及我分離出來(lái)的一個(gè)keynav.js文件。

接下來(lái)在keynav.js文件中準備兩個(gè)函數(shù)，一個(gè)是當用戶按鍵操作(zuò)時(shí)用來(lái)調用的函數(shù)showViaKeypress()，當用戶按鍵時(shí)，導航對應的模塊顯示出來(lái)，其他模塊隐藏，請(qǐng)看代碼：

function showViaKeypress(element_id){
	$(".box").css("display","none");
	$(element_id).slideDown("slow");
}

另一個(gè)函數(shù)showViaLink()，簡單的說是用一個(gè)數(shù)組處理(lǐ)當用戶點擊導航菜單時(shí)，鏈接對應的模塊。即當用戶不使用鍵盤按鍵操作(zuò)時(shí)還(hái)可(kě)以使用常規的鼠标點擊方法來(lái)導航。

function showViaLink(array){
	array.each(function(i){
		$(this).click(function(){
			var target = $(this).attr("href");
			$(".box").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

最後，當頁面加載的時(shí)候，jQuery要處理(lǐ)以下事情：

1、除了首頁#home模塊顯示外，其他導航對應的模塊都要先隐藏。

2、調用showViaLink()函數(shù)，相應點擊導航鏈接。

3、偵聽(tīng)用戶按鍵操作(zuò)，調用showViaKeypress()函數(shù)，完成切換導航功能。

$(function(){
	$(".box").css("display","none");
	$("#home").css("display","block");

	showViaLink($("#nav ul 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("#product");
				break;

			// user presses the "f" key
			case 102:
			    showViaKeypress("#service");
				break;

			// user presses the "g" key
			case 103:
			   showViaKeypress("#blog");
		}
	});
});

注意使用ASCII值，偵聽(tīng)到用戶按下的鍵值，如小(xiǎo)寫的“a”對應的ASCII值是“97”