我这里写了一个上箭头的方法,其他方向以此类推;
这只是其中一种实现的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.box{
height: 600px;
width: 1200px;
border: 2px solid aqua;
}
.cc{
width: 800px;
float: right;
height: 300px;
border: 2px solid green;
}
.cc .dd{
width: 120px;
height: 300px;
float: left;
background: yellow;
margin-left: 20px;
}
.cc1{
width: 800px ;
float: right;
height: 200px;
border:2px solid blue;
margin-top: 50px;
}
.cc1 .dd1{
width: 120px;
height: 200px;
float: left;
background: red;
margin-left: 20px;
}
.l{
width: 300px;
float: left;
height: 600px;
border: 2px solid red;
}
.li{
height: 80px;
background: black;
margin-top: 30px;
}
.active{
background: palegreen !important;
}
.top{
width: 1200px;
height: 200px;
border: 2px solid aquamarine;
}
.tt{
height:200px;
background: olive;
width: 150px;
float: left;
margin-left: 20px;
}
</style>
<script type="text/javascript">
$(function(){
var jqThis;
var len=0;
$(window).keydown(function(e){
console.log(e.keyCode)
$('.ee').each(function(){
if($(this).hasClass('active')){
jqThis = $(this)
len = $(this).parent().find('.ee').length;
}
});
// 上
if(e.keyCode==38){
if(jqThis.parent().hasClass('l')){
if(jqThis.index()==0){
jqThis.removeClass('active')
jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
}else{
jqThis.prev().addClass('active')
jqThis.removeClass('active')
}
}
if(jqThis.parent().hasClass('cc')){
jqThis.removeClass('active');
jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
}
if(jqThis.parent().hasClass('cc1')){
jqThis.parent().prev().find('.ee').eq(0).addClass('active')
jqThis.removeClass('active')
}
}
})
})
</script>
</head>
<body>
<div class="top">
<div class="tt ee">
</div>
<div class="tt ee">
</div>
<div class="tt ee">
</div>
<div class="tt ee">
</div>
<div class="tt ee">
</div>
</div>
<div class="box">
<div class="l">
<div class="li ee active" >
</div>
<div class="li ee">
</div>
<div class="li ee">
</div>
<div class="li ee">
</div>
<div class="li ee">
</div>
</div>
<div class="cc">
<div class="dd ee"></div>
<div class="dd ee"></div>
<div class="dd ee"></div>
<div class="dd ee"></div>
<div class="dd ee"></div>
</div>
<div class="cc1">
<div class="dd1 ee">
</div>
<div class="dd1 ee">
</div>
<div class="dd1 ee">
</div>
<div class="dd1 ee">
</div>
</div>
</div>
</body>
</html>