0

我在网站上有一组选项卡(主选项卡),每个选项卡都有另一组选项卡(子选项卡)。我想使用键盘上的箭头键来导航选项卡,而不是鼠标。

这些选项卡只是 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
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 回答
0

你可以用.length它来判断一个 jQuery 选择器是否找到了任何东西:

var nextSubTab = $(currentSubTab).next("li");
if (nextSubTab.length == 0) {
    // oops, end of this tab, switch to next tab
}
于 2010-12-09T16:52:53.977 回答