0

Webサイトに一連のタブ（メインタブ）があり、各タブには別の一連のタブ（サブタブ）があります。マウスの代わりに、キーボードの矢印キーを使用してタブをナビゲートしたい。

これらのタブは単なるHTMLリストアイテムです<li>

矢印キーで最後のサブタブに到達したら、次のメインタブに戻って、独自のサブタブを表示し、その中のナビゲーションを続行できるようにします。

私の質問は、jQuery / javascriptで、矢印キー、つまり右矢印キーを使用して最後のリスト項目（タブ）に到達したことをどのように検出できるかということです。

どうもありがとう

4

3 に答える 3

1

jQueryで：lastまたは：last-childセレクターを使用できる場合があります。<li>タグのネスト方法によっては、 children（）関数を一緒に使用する必要がある場合もあります。

たとえば、次のマークアップがあるとします。

    <ul id="nav">
        <li>List item</li>
        <li>List item with sub items
            <ul>
                <li>Sub list item</li>
            </ul>
        </li>
    </ul>

これにより、最後のトップレベルが選択されます<li>

$('ul#nav > li:last').css('border', '1px solid red');

代替テキスト

<li>これにより、DOMを下方向にトラバースする最後のものが選択されます。この場合は、<li>「サブリストアイテム」というテキストが含まれています

$('ul#nav li:last').css('border', '1px solid red');

代替テキスト

これ<li>により、親の最後の子であるタグが選択されます

$('ul#nav li:last-child').css('border', '1px solid red');

代替テキスト

于 2010-12-09T16:29:40.930 に答える
0

.lengthjQueryセレクターが何かを見つけたかどうかを調べるために使用できます。

var nextSubTab = $(currentSubTab).next("li");
if (nextSubTab.length == 0) {
    // oops, end of this tab, switch to next tab
}
于 2010-12-09T16:52:53.977 に答える
0 
var maintabs = $('.maintab'),
    active_maintab_eq = 0,
    active_subtab_number = 1;

$(document).keyup( function(e){

if (e.which == 39) {
// right arrow key pressed
    if ( active_subtab_number == maintabs.eq(active_maintab_eq).find('li').length ) {
        // go to next main-tab
        // and reset active sub-tab counter
        ++active_maintab_eq;
        active_subtab_number = 1;
    } else {
        ++active_subtab_number;
    }
}

});

このようなことだと思います。

于 2010-12-09T16:50:37.303 に答える