带导航菜单的键盘快捷键

时间:2011-09-06 13:03:29

标签: javascript jquery html

有些人请将我的代码与键盘键集成,以尽可能少的代码上下导航(我的网站足够重!)。 我尝试了一些插件并进行了大量搜索但是我的小经验并没有帮助我!

$(function() {
$('ul.nav a').each(function(i, elem) {
    $(elem).bind('click', function(event) {
        event.preventDefault();
        var offset = i * 38;
        $('ul.nav').stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 2000,'easeOutQuart');

        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 2000,'easeOutQuart');
            $('ul.nav a').css({'cursor': 'pointer', 'color': '#643D21'});
            $anchor.css({'cursor': 'default', 'color': '#995D32'});
        event.preventDefault();
    });
});
});

HTML代码

    <ul class="nav">
    <li><a href="#what">what</a></li>
    <li><a href="#who">who</a></li>
    <li><a href="#portfolio">portfolio</a></li>
    <li><a href="#contact">contact</a></li>
</ul>

理解的,

1 个答案:

答案 0 :(得分:0)

如果您只想将'1'上的按键映射到'#what',我会做这样的事情:

$("document").keypress(function(event) {
  if ( event.which == XX ) {
     location.href="#what";
   }

另一种方法是为您的链接指定一个id =“”并使用

$('#<ID OF ELEMENT>').click();

而不是

location.href="#what";

这里XX是您的密钥的按键值。对于'1',它是50.您可以使用this site来确定该键在底部的示例中具有什么值。将光标放在输入字段中并按一个键。在输出中查找“which”。

另请注意,这适用于页面上任意位置的按键。如果您想要将鼠标限制为某个元素,请将$('document')修改为keypress-event应该处于活动状态的任何元素。