上矢印と下矢印を使用したナビゲーションは機能しません

上矢印キーと下矢印キーのみを使用してHTML内のリストをナビゲートしたいと考えています。私は多くの解決策を見つけてこれを試してみましたが、それでもうまくいきませんでした。上矢印と下矢印を使用したナビゲーションは機能しません

また、このコードを試してみると、移動するのにうまくいきません。http://jsfiddle.net/Vtn5Y/ここで

は私のコードです：

<html> 
<head> 
    <link href="jquery/jquery-ui.css" rel="stylesheet"> 
    <script rel="stylesheet" type="text/css"> 
    li.selected {background:yellow} 
    </script> 
    <script src="jquery-3.1.0.js"></script> 
</head> 

<body> 
    <script > 
    var li = $('li'); 
    var liSelected; 
    $(window).keydown(function(e){ 
     if(e.which === 40){ 
      if(liSelected){ 
       liSelected.removeClass('selected'); 
       next = liSelected.next(); 
       if(next.length > 0){ 
        liSelected = next.addClass('selected'); 
       }else{ 
        liSelected = li.eq(0).addClass('selected'); 
       } 
      }else{ 
       liSelected = li.eq(0).addClass('selected'); 
      } 
     }else if(e.which === 38){ 
      if(liSelected){ 
       liSelected.removeClass('selected'); 
       next = liSelected.prev(); 
       if(next.length > 0){ 
        liSelected = next.addClass('selected'); 
       }else{ 
        liSelected = li.last().addClass('selected'); 
       } 
      }else{ 
       liSelected = li.last().addClass('selected'); 
      } 
     } 
    }); 
    </script> 

    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</body> 
</html>

出典

2016-12-01 jp remar serrano

私のために働く例。キーが正しいかどうかを確認するには、矢印キー（4つの矢印キー - 左、右、上および下）で上/下キーを使用してナビゲートするか、または8と2のキーを矢印キーあなたが上をナビゲートするために104を加えて＆98を下に移動しない限り... –

はい。 4つの矢印キー（左、右、上、下）を使用しています。私は現在、Google Chromeを使用していますが、まだ動作していないため、別のブラウザのMicrosoft Edgeを試しています。 –

ブラウザタイプの問題ではありません。カーソルが結果ウィンドウに表示されていない場合にのみ、私のためには機能しません。結果/ビュー領域ウィンドウをクリックしてナビゲートしようとしましたか？ –

は、このようにしてみてください - http://pastebin.com/J0wHL5j3

<html> 
<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <style> 
    li.selected {background:yellow} 
    </style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 

<body> 
    <script> 
    $(document).ready(function(){ 
    var li = $('li'); 
var liSelected; 
$(window).keydown(function(e){ 
    if(e.which === 40){ 

     if(liSelected){ 
      liSelected.removeClass('selected'); 
      next = liSelected.next(); 
      if(next.length > 0){ 
       liSelected = next.addClass('selected'); 
      }else{ 
       liSelected = $(li).first().addClass('selected'); 
      } 
     }else{ 
      liSelected = $(li).first().addClass('selected'); 
     } 
    }else if(e.which === 38){ 
     if(liSelected){ 
      liSelected.removeClass('selected'); 
      next = liSelected.prev(); 
      if(next.length > 0){ 
       liSelected = next.addClass('selected'); 
      }else{ 
       liSelected = li.last().addClass('selected'); 
      } 
     }else{ 
      liSelected = li.last().addClass('selected'); 
     } 
    } 
}); 
}); 
    </script> 

    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</body> 
</html>

私が行っている2つのだけのものがdocument.ready声明の中で、あなたのコードを追加することです。はまた、私は100％確実ではないが、私はそれがローカルにそれがうまく動作しているようだこれら二つのことをやった後

<style type="text/css">

を使用する可能性が高いです

<script rel="stylesheet" type="text/css">

を見ていません。

出典

2016-12-13 22:41:01

上矢印と下矢印を使用したナビゲーションは機能しません

答えて

関連する問題