Tabindex不工作？

Question

我一直在阅读有关如何将HTML中的tabindex功能应用于元素的文档，并且我试图将其添加到＆＃34; empty-btn＆＃34;我的HTML下面的按钮，但标签功能直接转到我的社交媒体图标。为什么是这样？如何解决此问题，以便在图标前选中按钮？

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

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

tabindex属性只能帮助您在Tab键顺序中设置元素的位置，但它不会帮助您专注于特定元素。