Tabindex不工作？

Question

我一直在阅读如何将HTML中的tabindex功能应用到元素的文档，我试图将它添加到我的HTML下面的“空btn”按钮，但Tab键功能直接传到我的社交媒体图标。为什么是这样？我该如何解决这个问题，以便它在图标之前标记按钮？

HTML

<p class="designations"> 
          <%= profile.designations %> 
              <button type="button" class="empty-btn" tabindex="0"> 
                <div class="designations-popup"> 
                  <div class="popup-content"> 
                    <h5><%- theme_data.designation_pop_title %></h5> 
                  <p><%- theme_data.designation_pop_msg %></p> 
                  </div> 
                </div> 
              </button> 
        </p> 
       <% } %> 
            <h2 itemprop="jobTitle"> 
              <%= theme_data.job_title.replace(/(®)/ig, "<sup>$1</sup>") %> 
            </h2> 
          </section> 
            <% if (profile.networks) { %> 
              <!-- Social Icons --> 
              <div class="hidden-sm hidden-xs pull-right social-icons"> 
                <% if (profile.networks.facebook_url) { %> 
                <a href="<%- profile.networks.facebook_url %>" target="_blank"> 
                  <img alt="Facebook Logo" src="./images/facebook.png"> 
                </a> 
                <% } %> 
                <% if (profile.networks.twitter_url) { %> 
                <a href="<%- profile.networks.twitter_url %>" target="_blank"> 
                  <img alt="Twitter Logo" src="./images/twitter.png"> 
                </a> 
                <% } %> 
                <% if (profile.networks.linkedin_url) { %> 
                <a href="<%- profile.networks.linkedin_url %>" target="_blank"> 
                  <img alt="LinkedIn Logo" src="./images/linkedin.png"> 
                </a> 
                <% } %> 
              </div> 
            <% } %> 

Answer 1

如果我理解你的问题正确你的问题更多的是将焦点设置上的按钮，而不是Tab键顺序。由于页面中有太多动态内容，因此我认为将焦点放在您希望首先选择的元素上是有意义的。您也可以删除tabindex = 0，并将标签保留给浏览器（除非您想要一个真正混乱的标签顺序）。

tabindex属性只能帮助您按照制表顺序设置元素的位置，但它不会帮助您将注意力集中在特定元素上。