html - 如何使一个元素在CSS中无法聚焦

Question

我有一个隐藏在应用程序移动 View 中但在桌面 View 中可见的菜单。因此，由于它未激活，因此当 Tab 浏览时不应聚焦该菜单中的元素，但当菜单隐藏时它们是 Tab 可用的。

这是我在 applicantion.html.haml 中看到的内容

......
    .page-layout
      .page-layout-sidebar
        =link_to '/', class: "page-Branding page-Branding--secondary" do
          = image_tag site_logo_src, alt: 'Logo'
        %nav.page-Layout-nav{'aria-label' => 'Primary Navigation', 'role' => 'navigation'}
          %ul.topia-Nav
            - feature :item1 do
              %li
                =link_to t('menu.item1'), root_path, { :class => 'page-Nav-action'}
            - feature :item2 do
              %li
                =link_to t('menu.item2'), item2_path, { :class => 'page-Nav-action'}
......

我确实在页面上进行了检查，并且在多个 css 文件中看到了 page-Nav-action。我尝试在 html 中使用 tabindex: -1 它可以在移动 View 中使用，但在桌面 View 中我无法通过菜单项切换。另外 tabindex 是 HTML 属性，所以不能在 CSS 中使用。我猜我已经对 CSS 进行了更改。感谢您的帮助。

Answer 1

tabIndex 是您在 HTML 中需要的值。设置为 -1 将确保选项卡按钮不会聚焦元素。在 CSS 中没有支持的方法来执行此操作。您可以在 Javascript 中切换 tabIndex 值。

window.onresize = function(){
    if(this.innerWidth > 500){
        tabIndexes(0)
    } else {
        tabIndexes(-1)
    }
}

function tabIndexes(index){
    var inputs = document.querySelectorAll('input');
    for(var i = 0; i < inputs.length; i++) inputs[i].tabIndex = index;
}