使用向上和向下箭頭導航不起作用

我想僅使用向上和向下箭頭鍵在我的html中導航列表。我發現許多解決方案，並嘗試這http://jsfiddle.net/mkamithkumar/kgEwT/1/，但它不起作用使用向上和向下箭頭導航不起作用

我也嘗試此代碼在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個箭頭鍵 - 左，右，上和下。我也嘗試使用其他瀏覽器Microsoft Edge，因爲我目前使用Google Chrome，但它仍然無法使用。 –

它不應該是一個瀏覽器類型的問題。只有當我的光標不在結果窗口上，你是否嘗試單擊結果/視圖區域窗口然後嘗試導航時，它才適用於我？ –

嘗試這樣的 - 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>

的只有兩件事情我做的是對的document.ready語句添加代碼。還我不是100％肯定，但我還沒有看到

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

它更可能使用

<style type="text/css">

本地做這兩件事情，似乎是工作的罰款後。

來源

2016-12-13 22:41:01

使用向上和向下箭頭導航不起作用

回答

相關問題