フォーカスのJSアクション

Question

フォーカスをタブキーで取得したときにのみ表示されるメニューを作成したいとします。 たとえば、このウェブサイトhttp://bon.agh.edu.pl/を開き、タブキーを押すと新しいメニューが表示されます。 以下のコードはありますが、動作しません。

<style> 
.style{ 
    position: absolute; 
    left: -60px; 
} 
.style1{ 
    position: absolute; 
    left:10px; 
} 
</style> 

<div id="navbar"> 
    <div class="menu-default-container"> 
     <ul id="menu-default" class="style"> 
      <li id="menu-item-756" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-756"><a href="http://localhost/sweetlife2">Główna</a></li> 
      <li id="menu-item-753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-753"><a href="http://localhost/sweetlife2/pakiety/">Pakiety</a></li> 
      <li id="menu-item-755" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-755"><a href="http://localhost/sweetlife2/internet/">Internet</a></li> 
      <li id="menu-item-754" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-754"><a href="http://localhost/sweetlife2/telewizja/">Telewizja</a></li> 
      <li id="menu-item-1151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1151"><a href="http://localhost/sweetlife2/kontakt/">Kontakt</a></li> 
      <li id="menu-item-1386" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://localhost/sweetlife2/dokumenty/">Dokumenty</a></li> 
     </ul> 
    </div> 
</div> 

<script> 
$('#menu-default').focus(function(){ 
    $("#navbar").removeClass(); 
    $('#navbar').addClass('style1'); 
}, 
function(){ 
    $("#navbar").removeClass(); 
    $('#navbar').addClass('style'); 
}); 
</script> 

私は何が間違っているのか分かりません。なにか提案を？

---

[OK]問題を解決できました。誰もがそれを必要とする場合はソリューションは、怒鳴る

var menu = document.getElementById("menu-default"); 
menu.addEventListener("focus", function(event) { 
    $("#navbar").removeClass(); 
    $('#navbar').addClass('style1'); 
}, true); 
menu.addEventListener("blur", function(event) { 
    $("#navbar").removeClass(); 
    $('#navbar').addClass('style');  
}, true) 

であるあなたは身体レベルでのキー入力をキャプチャする必要がありますあなたに

Answer 1

ありがとうございます。たとえば：

$("body").keypress(function(event) { 
    if (event.which == 9) { 
    event.preventDefault(); 
    $('#navbar').addClass('style1'); // Add or remove class.      
    } 
}) 

Click here for more information about keypress