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屬性只能幫助您按照製表順序設置元素的位置，但它不會幫助您將注意力集中在特定元素上。