1

我目前正在开展一个项目，以使网站更易于访问。在这方面，我遇到了与 tabindex/tab 顺序相关的问题。单击菜单按钮后，将显示一个子菜单，其中包含一个带有两个选项卡的菜单栏。每个选项卡在单击时都会显示另一个子菜单。我想要的是能够在单击菜单时直接关注第一个选项卡。一旦第一个选项卡获得焦点，应该能够在此选项卡和第二个选项卡之间来回切换，并通过按 Enter 选择其中一个。

选择项目后，按 Tab 应继续浏览为所选选项卡显示的子菜单中的所有项目。我为此创建了以下代码：

    // First set the tabindex for both tabs to 0 to be able to
    // tab through them sequentially
    $('#tab1').attr("tabindex", 0);
    $('#tab2').attr("tabindex", 0);

    // Set focus on the first tab once the main menu link has been clicked
    $('#menulink').click(function({ $('#tab1').focus(); });

    // Select appropriate tab when ENTER is pressed
    $('#tab1').keydown(function(event) { 
        if(event.which == 13) { event.preventDefault(); }
        $('#tab1').click();
    });
    $('#tab2').keydown(function(event) {
        if(event.which == 13) { event.preventDefault(); }
        $('#tab2').click();
    });

如果我按 tab 转到 tab2 然后尝试 shift+tab 返回 tab1 并选择它，就会出现问题。然后它不允许我在它的子菜单中进一步向下选择 - 它再次直接返回到 tab2，然后在它的子菜单中继续。选择时，我尝试将焦点显式设置为子菜单中的选项卡第一个元素，但这也不起作用。有人对如何使这项工作提出建议吗？

更新：HTML 看起来像这样

    <a href="#" id="**menulink**" class="actionDropDownList menulink" title="Hovedmeny">
            Hovedmeny</a>
        <div id="mainMenu">
            <div id="mainMenuPositionWrapper">
                <div id="mainMenuGfxTop"></div>
                    <div id="mainMenuWrapper">
                        <div id="mainMenuBgWrapper" class="clearfix">
                            <!--Menubar with tabs-->
                            <ul id="swapMenu" style=" ">
                                <li><a id="**tab1**"><span>Privat</span></a></li>
                                <li><a id="**tab2**"><span>Bedrift</span></a></li>
                            </ul>
                            <!--TAB1 submenu-->
                            <div id="**tab1_submenu**">
                                <dl class="firstColumn">
                                    <dt><a xmlns="" id="tab1submenu_item1">Lån og 
                                    eiendom</a></dt>
                                    <dd><a xmlns="" id="tab1submenu_item2">Boliglån ung               
                                    </a></dd>...**more menuitems follows.**
                            <!--TAB2 submenu-->
                            <div id="**tab2_submenu**">
                                <dl class="firstColumn">
                                    <dt><a xmlns="" id="tab2submenu_item1">Lån og 
                                    eiendom</a></dt>
                                    <dd><a xmlns="" id="tab2submenu_item2">Boliglån</a>
                                    </dd>...**more menuitems follows.**
4

0 回答 0