web-dev-qa-db-ja.com

<ul> <li>要素をキーボードでナビゲートする方法

重複の可能性：
jqueryを使用したメニューのキーボードナビゲーション

<ul> <li>タグを使用してメニューを作成し、ユーザーがテキストボックスのEnterキーを押したときにメニューを表示しました。彼はマウスを使用してメニューの項目を選択できます（メニュー内を移動します）が、たとえばキーボードの上下ボタンを使用してそのメニューから項目を選択できるようにもしたいと思います。

JQueryまたはCSSを使用してそれを行う方法はありますか？

私のメニューは次のような構造になっています。

<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>要素には背景画像もあります。

jqueryhtmlcssnavigationcontextmenu
16
Bakhtiyor

動作中のjsFiddle

循環選択の処理方法は次のとおりです。

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;   
}
20
Benjamin Crouzier

HTMLだけで、「tab」キー、次に「Enter」キーを使用することで、すでに可能です。 CSSスタイルを2倍にすることができますa:hover by a:focus、この可能性を強調します=）

2
Lamecarlate