Wie man einen Artikel unfocusable in css

Question

machen Ich habe ein Menü, das in der mobilen Ansicht der Anwendung versteckt und in der Desktop-Ansicht sichtbar ist. Da es nicht aktiviert ist, sollten die Elemente in diesem Menü nicht fokussiert werden, wenn sie durchgeblättert werden, aber sie sind tab-fähig, wenn das Menü ausgeblendet ist. Diese

ist, was ich in 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'} 
...... 

sehe ich auf Seite habe inspizieren und ich sehe Seite-Nav-Aktion in mehreren CSS-Dateien. Ich habe versucht, tabindex: -1 in HTML zu verwenden, es funktioniert in der mobilen Ansicht, aber dann in der Desktop-Ansicht kann ich nicht durch Menüelemente Tab. Auch tabindex ist HTML-Attribut, so kann nicht in CSS verwendet werden. Ich vermute, ich habe Änderungen von CSS vorgenommen. Jede Hilfe wird geschätzt.

Answer 1

tabIndex ist der Wert, den Sie in HTML benötigen. Bei Einstellung auf -1 wird sichergestellt, dass die Tab-Schaltfläche das Element nicht fokussiert. Es gibt keine unterstützte Methode, dies in CSS zu tun. Sie können den Wert tabIndex in Javascript umschalten.

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