javascript - 使用 jquery 将键盘焦点设置为具有类 "active"的项目

Question

我遇到的问题是我正在尝试使用 jQuery 将键盘焦点分配给 Bootstrap “事件”类。目标是允许从下拉菜单中进行选择的辅助功能用户直接转到所选项目，并跳过其余部分。

jQuery:

  $(document).ready(function () {
    $('span').find('.active').focus
});

HTML:

  <div class="col-xs-12 ApplicationSubtabs" style="height:auto">
                <span class="Subtab NoteTab" style="z-index:2;height:auto;">
                    <span id="NotesBtn">Notes</span>
                </span>
                <span class="Subtab DetailTab">
                    <span id="InfoBtn" class="subTabAction">Details</span>
                    <span id="DurationBtn" class="subTabAction">Duration</span>
                    <span id="POCList" class="subTabAction">Points of Contact</span>

                    @if (Model.AdditionalLocations.Count > 1)
                    {
                        <span id="AdditionalLocationsBtn" class="subTabAction">Additional Locations</span>
                    }

                </span>
                <span class="Subtab RequirementTab" style="z-index:2;height:auto;">
                    <span id="EligiblePrograms" class="subTabAction"> Eligible Programs</span>
                    <span id="RateInfo" class="subTabAction">Tuition Rate Info</span>
                    <span id="CurrentRates" class="subTabAction">Institution Tuition Rates</span>
                    <span id="CurrentInstitutionFees" class="subTabAction">Institution Fees</span>
                    <span id="CurrentOtherExpensesPolicy" class="subTabAction">Other Expenses/Policy</span>
                    <span id="CurrentProgramRates" class="subTabAction" @if (!Model.HasProgrammaticRatesCurrent) { @Html.Raw("style='display:none'")  }>Program-Specific Tuition Rates</span>
                </span>
                @if (Model.CurrentInstitutionTuitionRateHeaderId > 0)
                {
                    <span class="Subtab AnnualRequirementTab subTabAction" style="z-index:2;height:auto;">
                        <span id="AnnualEligiblePrograms" class="subTabAction"> Eligible Programs</span>
                        <span id="AnnualRateInfo" class="subTabAction">Tuition Rate Info</span>
                        <span id="AnnualInstitutionRates" class="subTabAction">Institution Tuition Rates</span>
                        <span id="AnnualInstitutionFees" class="subTabAction">Institution Fees</span>
                        <span id="AnnualOtherExpensesPolicy" class="subTabAction">Other Expenses/Policy</span>
                        <span id="AnnualProgrampecificRates" class="subTabAction" @if (!Model.HasProgrammaticRatesAnnual) { @Html.Raw("style='display:none'")  }>Program-Specific Tuition Rates</span>
                    </span>
                }
            </div>

Answer 1

find() 应该将类作为选择器，而不是像标签元素那样active，并且您也不调用 focus() 在第一行。试试这个:

 $(document).ready(function () {
    $('span').find('.active').focus();
});

另外，$(this('id'))是错误的，它应该看起来像$(this)或$(this).attr( 'id')，但在这种情况下，我认为不需要使用 $(this)。

更新:

对于点击事件处理程序，您可以使用:

$('.subTabAction').on('click', function(){
     $(this).find('.active').focus();
});