用键盘跟鼠标对li的选择进行操作-JavaSript-爱易网页

用键盘跟鼠标对li的选择进行操作

日期：2014-05-16　浏览次数：20374 次

用键盘和鼠标对li的选择进行操作
本人是用的腾讯的接口实现的绑定数据，想实现当按下down和up还有鼠标悬浮的时候对li进行选择高亮，li是动态添加的，我不知道怎样判断当前高亮的li 从而进行下一次高亮选择。请求大神帮助

------解决方案--------------------
做了个示例，仅供参考：



<!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>无标题文档</title>

<script src="jquery-1.2.6.pack.js"></script>

<style>

ul,li,dl,dd{padding:0;margin:0;}

ul{width:410px;}

li{list-style:none;border:1px solid red;float:left;width:410px;}

dd{float:left;width:100px;line-height:20px;border:1px solid #ddd;padding:3px 0;}

.cur{background-color:#ccc;}

</style>

</head>



<body>

<ul id="container"></ul>



<script>

var json=[

{id:"000002",name:"万科A",pingyin:"WKA",city:"深圳"}

,{id:"000003",name:"万科A",pingyin:"WKA",city:"深圳"}

,{id:"000004",name:"万科A",pingyin:"WKA",city:"深圳"}

,{id:"000005",name:"万科A",pingyin:"WKA",city:"深圳"}

,{id:"000006",name:"万科A",pingyin:"WKA",city:"深圳"}

];

$(function(){

	

	json.forEach(function(i){

		$("#container").append("<li><dl><dd>"+ i.id +"</dd><dd>"+ i.name +"</dd><dd>"+ i.pingyin +"</dd><dd>"+ i.city +"</dd></dl></li>");

	});

	$("#container li").eq(0).addClass("cur");

	$(document).keydown(function(event){ 

	 var cur=$("#container li.cur");

	 var length=$("#container li").length;

	 var first=$("#container li").eq(0);

	 var last=$("#container li").eq(length-1);

     if(event.keyCode==40)

	 {

		 if(cur.html()!=last.html())

		 {

			cur.removeClass("cur");

			cur.next().addClass('cur');

		 }

		 

	 }

	 if(event.keyCode==38)

	 {

		 if(cur.html()!=first.html())

		 {

			cur.removeClass("cur");

			cur.prev().addClass('cur');

		 }

	}

}); 

});

</script>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用键盘跟鼠标对li的选择进行操作

相关资料更多>

推荐阅读更多>