如何在css中使项目无法聚焦答案

【问题标题】：How to make an item unfocusable in css如何在css中使项目无法聚焦
【发布时间】：2017-02-09 21:12:35
【问题描述】：

我有一个隐藏在应用程序的移动视图中并在桌面视图中可见的菜单。因此，由于未激活该菜单中的项目，因此在通过选项卡时不应聚焦，但在隐藏菜单时它们是可选项卡的。

这是我在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 它在移动视图中工作，但在桌面视图中我无法通过菜单项进行选项卡。 tabindex 也是 HTML 属性，因此不能在 CSS 中使用。我猜我已经从 CSS 进行了更改。任何帮助表示赞赏。

【问题讨论】：

菜单如何隐藏？
那是……不是 HTML。
有一些媒体查询隐藏了这一点。
@MikeMcCaughan 抱歉，我是 HTML 和 CSS 新手
由于文件名结尾，我猜测语言是 HAML。请确保使用适当的标签。

标签： html css haml tabindex

【解决方案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;
}

【讨论】：