如何在css中使项目不可聚焦

Question

我有一个隐藏在应用程序的移动视图中并可在桌面视图中查看的菜单。因此，因为它没有被激活，所以当菜单被隐藏时，该菜单中的项目不应该被聚焦，但是它们是可选择的。

这是我在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文件的页面导航行动。我尝试在HTML中使用tabindex: -1它在移动视图中工作，但在桌面视图中，我无法通过菜单项选项卡。另外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; 
}