Как сделать элемент неуправляемым в 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'} 
...... 

Я инспектировать на странице и я вижу страницу-Nav-действие в нескольких файлах CSS. Я попытался использовать tabindex: -1 в html, он работает в мобильном режиме, но затем на рабочем столе я не могу вставлять элементы меню. Также tabindex - это атрибут HTML, поэтому его нельзя использовать в CSS. Я предполагаю, что внес изменения из CSS. Любая помощь приветствуется.

Answer 1

tabIndex - это необходимое значение в HTML. При установке на -1 убедитесь, что кнопка вкладок не будет фокусировать элемент. В CSS нет поддерживаемого метода. Вы можете переключить значение tabIndex в Javascript.

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; 
}