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();

Answer 2

有人这样写道：

<script type="text/javascript">
    function fnSelect(objId) {
        fnDeSelect();
        if (document.selection) {
        var range = document.body.createTextRange();
             range.moveToElementText(document.getElementById(objId));
        range.select();
        }
        else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().addRange(range);
        }
    }


    function fnDeSelect() {
        if (document.selection) document.selection.empty(); 
        else if (window.getSelection)
                window.getSelection().removeAllRanges();
    }
    </script>
<body>

<div id="test1">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<div id="test2">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<a href="javascript:fnSelect('test1');">Select 1</a>
<a href="javascript:fnSelect('test2');">Select 2</a>
<a href="javascript:fnDeSelect();">DeSelect</a>
</body>

似乎工作。我稍后会看看它是怎么做的。

Javascript：使用键盘浏览DIV列表

2 个答案: