javascript - OnClick 键盘中的 Tab 按钮未突出显示 DOM 中的所有按钮或超链接

问题描述

这里有一个要求，当我们点击 Tab Button 然后在浏览器上它应该突出显示所有超链接 ToolTip 和按钮，因为在某些情况下，当点击 om tab 键时，它会跳过 DOM 的某些部分并跳过按钮的某些部分. 如何实现这一目标

`<div class="tech-section" id="specs-1-0-0">
<div class="row heading-row">
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
        <h3>Essentials</h3>
    </div>

    <div class="hidden-xs col-sm-4 col-md-4 col-lg-3 col-xl-3 export-container">
        <a class="export-link" role="button" data-user-exit="SingleExport">Export Specifications
            <span class="fa-arrow-right"></span></a>
        </div>

    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Collection
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
             9 Series
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Code Name
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            <a href="https://something.html">Mansion Beach</a>
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Capacity
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            1.5 TB
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Status
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            Launched
        </div>
    </div>
    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Launch Date
            <button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with  Launch Date" data-search-href="" data-search-icon="true">
                <span class="fa-tooltip"></span>
            </button>
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            Q3'18
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Lithography Type
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            3D 
        </div>
    </div>
</div>`

就像我们有一些页面：现在，当我单击页面上的选项卡然后从标题开始时，现在当涉及到上述循环时，它会突出显示所有部分，同时单击 Tab 键会突出显示该行<a href="https://something.html">Mansion Beach</a>，但是当再次单击选项卡时它会移动出此并转到页脚

相反，它还应该突出显示启动日期，即我们可以在底部看到一个按钮 <button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true"> <span class="fa-tooltip"></span> </button>

但它没有突出显示。

任何人都可以帮助我了解这个“tab key press”如何工作以及如何解决上述问题的概念

标签： javascripthtmljquerycssaem

javascript - OnClick 键盘中的 Tab 按钮未突出显示 DOM 中的所有按钮或超链接

问题描述

解决方案

推荐阅读