javascript - Javascript按键点亮

在网页上，如何使用户能够使用键盘上的特定键来点亮页面上的框/项目？例如。我想让M点亮我的标题，当我再次按M时，它会关闭吗？

这是我到目前为止所拥有的，但是感觉它可以被清理很多

$('#abutton').click(function() {
    $('#abutton').removeClass('off').addClass('on');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#bbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('off').addClass('on');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#cbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('off').addClass('on');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#dbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

最佳答案

只需将通用类.button添加到所有这些类中。然后从所有on元素中删除.button并将on类添加到精确单击的元素中。

$('.button').click(function() {
    $('.button').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
    window.scrollTo(0,0);
});