怎么实现用键盘选择菜单

2013-07-16

如何实现用键盘选择菜单？我用css+html做了一个菜单，当鼠标移上去的时候菜单出来，移开菜单消失。但现在要添

如何实现用键盘选择菜单？
我用css+html做了一个菜单，当鼠标移上去的时候菜单出来，移开菜单消失。
但现在要添加功能："当用Tab聚焦到主菜单上按下enter键时子菜单显示出来，此时按tab键可以选择子菜单项，按下ESC子菜单消失"，该怎样改？可以用css或者结合javascript，只要能实现即可，现在非常急，请大家帮忙。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>prod menus</title>

<style>
ul.hMenu li:hover a { color:red;}           
        ul.hMenu li div table{  background-color:yellow;}    
        ul.hMenu  { 
            margin: 0;
            padding: 0; 
            z-index: 1;                 
        }
        ul.hMenu li  {  
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width:140px;
        }
        ul.hMenu li a { 
            display: block; 
            text-align: left;
            text-decoration: none
        }          
        ul.hMenu li div  {                    
            position: absolute;             
            display: none;                
        }
        ul.hMenu div a {background: yellow;      
 
        }
        ul.hMenu li :hover   {  background: yellow}
        /**Mouse hover the menus can show up**/
        ul.hMenu li:hover   div{            
            display:block;
        }
        /**Why this line can not work when the "Tab" to focus on the menu？**/
        ul.hMenu li :focus  div{            
            display:block;
        }
</style>

</head>
<body>
<ul class="hMenu">
<li><a href="">prod1</a>
<div>
<a href="">test1</a>
<a href="">test2</a>
<a href="">test3</a>
</div>
</li>
<li><a href="javascript:void(0);" >prod2</a>
<div>
<a href="">test4</a>
<a href="">test5</a>
</div>
</li> 
</ul>
</body>
</html>

[解决办法]

引用:

onkeydown事件就可以了

$(document).keydown(function(e){
    var key = ev.keyCode
[解决办法]
ev.witch;
    switch(key) {
        case 13://回车
         alert('回车');
        break;
        case 27:
         alert('esc');

        break;
        case 38:
         alert('上');
        break;
        case 40:
         alert('下');
        break;
    }
});

写错了点
$(document).keydown(function(ev){
    var key = ev.keyCode
[解决办法]
ev.witch;
    switch(key) {
        case 13://回车
         alert('回车');
        break;
        case 27:
         alert('esc');
        break;
        case 38:
         alert('上');
        break;
        case 40:
         alert('下');
        break;
    }
});

热点排行

JavaScript

怎么实现用键盘选择菜单