我想用键盘浏览“nav-items”。我从这段代码开始。这仅仅是个开始：
jQuery手机：
window.onload = function() {
document.onkeydown=function(e){
if (!e) e=window.event;
switch(e.keyCode) {
case 37:
$("a").blur();
$("a").prev(".nav-item").focus();
break;
case 38:
alert("Up arrow");
break;
case 39:
$("a").blur();
$("a").next(".nav-item").focus();
break;
case 40:
alert("Down arrow");
break;
case 13:
$("a:selected").click();
break;
}
}
}
如您所见，目前我只尝试使用 right、prev 和 enter。对第二类的enter(:13)点击并很好地过渡到#category. 问题是我看到多个项目被选中。第一个类别从不集中，但进行了类似的.hover转换，但也有多个项目。
网格中的项目从不集中。
后来，我想使用向下和向上箭头。我离得很远吗？
的HTML：
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div>
</div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li></a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="http://151.jpg" /><li style="list-style-type:none">Youtube</li></a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item"><img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li></a>
</div>
</div>
</div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
<div data-role="page" class="pagen" id="Otra" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div></div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li>
</a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="http://151.jpg" /><li style="list-style-type:none">Youtube</li>
</a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li>
</a>
</div>
</div></div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
<div data-role="page" class="pagen" id="Otramas" data-theme="b">
<div data-role="header" data-theme="b">
<div data-role="controlgroup" data-type="horizontal" data-iconpos="right" id="header_btn">
<a class="but nav-item" href="#" data-role="button" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
<a class="but nav-item" href="" data-role="button" data-icon="home" data-rel="home" data-direction="reverse">Home</a>
</div></div>
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a" style="width:30%">
<a class="but nav-item" data-transition="slide" href="#Categor" data-role="button">Categor</a>
<a class="but nav-item" data-transition="slide" href="#Otra" data-role="button">Otra</a>
<a class="but nav-item" data-transition="slide" href="#Otramas" data-role="button">Otramas</a>
</div>
<div class="ui-block-b" style="width:65%; float:right; overflow:auto" id="divi">
<h1>Categor </h1>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="http://vimeo.com" id="it1" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="150.jpg" /><li style="list-style-type:none">Vimeo</li>
</a>
</div>
<div class="ui-block-b">
<a href="http://youtube" id="it2" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="151.jpg" /><li style="list-style-type:none">Youtube</li>
</a>
</div>
<div class="ui-block-c">
<a href="http://alibaba.com" id="it3" data-role="button" data-theme="b" class="but nav-item">
<img width="150" height="150" src="152.jpeg" /><li style="list-style-type:none">Ali Baba</li>
</a>
</div>
</div></div><p><p>
<div data-role="footer" data-id="foot" data-position="fixed">
<h4> Categor - Nuevo</h4>
</div>
</div>
</body>