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文件中看到了page-Nav-action。我尝试在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;
}

如何使一个项目在CSS中不可聚焦

1 个答案: