使用向上和向下箭头导航不起作用

我想仅使用向上和向下箭头键在我的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

使用向上和向下箭头导航不起作用

回答

相关问题