我在页面上有 2 个 div,我希望用户能够使用箭头键在其中移动。我尝试通过使用焦点来区分它们,但太多的项目(如输入)可以获得焦点。目前,当我单击该 div 时,我正在应用带有虚线的“集中”css 样式,以使其脱颖而出,并从其他 div 中删除该样式。
.focused{
border: 1px dashed #cccccc;
}
$('#tagCommon').click(function(){
$(this).focus().addClass("focus2");
$('#tagLatin').removeClass("focus2");
});
I think this https://stackoverflow.com/questions/7782266/jquery-move-div-with-arrow-keys将拦截按键事件。
那么我怎样才能只移动具有 focus2 类的对象呢?就像是:
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$('only the div that has class focus2').stop().animate({
left: '-= 10'
}); //left arrow key
break;
}
});
非常感谢你再次救我出来
托德
我不确定您是否仍然需要解决方案,但您可以检查一下:http://jsfiddle.net/ft2PD/41/ http://jsfiddle.net/ft2PD/41/
这是html
<div id='div1'>
<input type='text' value='hello' />
</div>
<div id='div2'>
<label> World</label>
</div>
这是 JavaScript:
$(document).ready(function(){
$('#div1,#div2').click(function(){
$('div.selected').removeClass('selected');
$(this).addClass('selected');
})}).keyup(function(e){
var div = $('div.selected');
console.log(div);
console.log(e.which);
switch (e.which) {
case 37:
$(div).stop().animate({
left: '-=10'
}); //left arrow key
break;
case 38:
$(div).stop().animate({
top: '-=10'
}); //up arrow key
break;
case 39:
$(div).stop().animate({
left: '+=10'
}); //right arrow key
break;
case 40:
$(div).stop().animate({
top: '+=10'
}); //bottom arrow key
break;
}
});
最后是CSS
#div1
{
position: absolute;
width:100px;
height:100px;
margin:15px;
padding:15px;
border: thin solid #D2D2D2;
}
#div2
{
position: absolute;
width:50%;
margin:15px;
padding:15px;
border: thin solid #D2D2D2;
}
.selected
{
border: 1px dashed #cccccc !important;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)