問題描述

可能重復(fù):
使用 jquery 的菜單的鍵盤導(dǎo)航

我使用 <ul> 創(chuàng)建了一個菜單.<li> 標(biāo)記并在用戶按下文本框中的 Enter 鍵時將其顯示給用戶.他可以使用鼠標(biāo)選擇菜單項目(在菜單中導(dǎo)航)，但我也希望允許他使用鍵盤的向上/向下按鈕從該菜單中選擇項目.

I created a menu using <ul> <li> tags and showing it to the user when he presses Enter key in the textbox. He can select items of the menu (navigate in menu) using mouse but I want also to allow him to select items from that menu using up/dow buttons of the keyboard for example.

有沒有辦法使用 jQuery 或 CSS 來做到這一點?

Is it any way to do that using jQuery or CSS?

我的菜單結(jié)構(gòu)如下:

<div class="services">
  <div class="items">
    <ul>                           
        <li class="mail-icon"><a href="#" id="mail"><?php echo $langmsg['mail']; ?></a></li>
        <li class="forum-icon"><a href="#" id="forum"><?php echo $langmsg['forum']; ?></a></li>
        <li class="chat-icon"><a href="#" id="chat"><?php echo $langmsg['chat']; ?></a></li>
    </ul>
  </div>
</div>

注意:<li> 元素也有背景圖片.

Note: <li> element has a background image also.

推薦答案

工作中的jsFiddle

以下是如何處理循環(huán)選擇:

Here is how to handle circular selection:

if (e.keyCode == 38) { // up
    var selected = $(".selected");
    $(".services li").removeClass("selected");

    // if there is no element before the selected one, we select the last one
    if (selected.prev().length == 0) {
        selected.siblings().last().addClass("selected");
    } else { // otherwise we just select the next one
        selected.prev().addClass("selected");
    }
}

css:

.services li.selected {
    background-color: grey;   
}

這篇關(guān)于如何通過 <ul> 使用鍵盤導(dǎo)航<li>元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！