如何通过按键盘键来改变div?

mod*_*man -5 html javascript css keyboard jquery

我有两个div

<div class="summary">Summary</div>

<div class="summary-cont"><p>Content...</p></div>
Run Code Online (Sandbox Code Playgroud)

div"summary-cont"被隐藏,显示:无;

我想像这样工作:我按下键盘按钮"S"然后div"摘要"隐藏并显示div"summary-cont"

有人知道如何用javascript做到这一点?

这是工作代码:

<script>
$(document).keyup(function(e) {
  if (e.keyCode == 83) { $('.summary').hide(); }     // S
  if (e.keyCode == 83) { $('.summary-cont').show(); }   // S
});
</script>
Run Code Online (Sandbox Code Playgroud)

San*_*jay 7

这对你S或两个s角色都有效.

运用 Javascript

document.onkeydown = function(e) { // or document.onkeypress
    e = e || window.event;
    if (e.keyCode == 115 || e.keyCode == 83) {
        alert("do something");
    }
};
Run Code Online (Sandbox Code Playgroud)


使用jQuery库.如果你有任何input盒子.

$('input').bind('keypress', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 115 || code == 83) { //Keycode for alphabets S(83) & s(115)
       //Do something (show your div)
    }
});
Run Code Online (Sandbox Code Playgroud)

对于没有input盒子的解决方案,你可以尝试这个.

$(document).bind('keypress', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 115 || code == 83) { //Keycode for alphabets S(83) & s(115)
       //Do something (show your div)
    }
});
Run Code Online (Sandbox Code Playgroud)