Javascript：使用键盘在 DIV 列表中导航

Question

我想要一个 DIV 列表，用户可以通过按向上/向下光标键并在他更改当前 DIV 时获取事件来导航，就像在 Google Instant 结果中一样。你知道是否有一个 jQuery/JS 组件来实现它或任何关于使用组件的建议。

谢谢 ！

Answer 1

编辑

我将其更改为使用鼠标悬停来突出显示 div 并设置单击和箭头键时输入的内容。我认为这更类似于你想要的谷歌。

结束编辑

我只是为你写了这个。我希望您能够使用它：http : //jsfiddle.net/Paulpro/evBkC/8/ 修改 css 以按照您想要的方式对其进行样式设置应该很容易。如果输入字段具有焦点，它会突出显示 div onclick 并检测向上和向下箭头键。它在一个名为的变量中跟踪 selectedDiv 的索引，selectedDiv以便您可以根据需要使用它。它应该是完全跨浏览器的，至少可以追溯到 IE 5.5 和所有其他主要浏览器。

HTML：

<div id="nav">
    <input type="text" />
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div>Line 5</div>
    <div>Line 6</div>
</div>

CSS：

#nav, #nav input{
  width: 300px; 
}

#nav div{
  width: 150px;    
  margin-left: 75px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  cursor: pointer;
}

Javascript：

var divs = document.getElementById('nav').getElementsByTagName('div'),
selectedDiv = 0,
i;

for(i = 0; i < divs.length; i++){
    divs[i].onmouseover = (function(i){
       return function(){
           divs[selectedDiv].style.backgroundColor = '';
           selectedDiv = i;
           divs[selectedDiv].style.backgroundColor = '#68F';
       }
    })(i);

    divs[i].onclick = function(){
        document.getElementById('nav').
          getElementsByTagName('input')[0].focus();
        document.getElementById('nav').
          getElementsByTagName('input')[0].value = 
            (this.innerText || this.textContent);
    };
}

divs[selectedDiv].style.backgroundColor = '#68F';

document.getElementById('nav').
  getElementsByTagName('input')[0].onkeydown = function(e){
     var x = 0;
     if(e.keyCode == 38)
         x = -1;
     else if(e.keyCode == 40)
         x = 1;
     else
         return;
     divs[selectedDiv].style.backgroundColor = '';
     selectedDiv = ((selectedDiv+x)%divs.length);
     selectedDiv = selectedDiv < 0 ? 
       divs.length+selectedDiv : selectedDiv;
     document.getElementById('nav').
       getElementsByTagName('input')[0].value = 
         (divs[selectedDiv].innerText || divs[selectedDiv].textContent);
     divs[selectedDiv].style.backgroundColor = '#68F';
};

document.getElementById('nav').
  getElementsByTagName('input')[0].focus();