javascript - 管理焦点到 HTML 表格

Question

以下代码是侧边栏中的一个选定元素:

<table cellpadding="0" cellspacing="0" border="0" align="left">
   <tr>
      <td valign="top">
         <ul class="mainsidebar">
            <li class="mainsidebarli">
               <table cellpadding="1" cellspacing="0" border="0" width="100%">
                  <tr>
                     <td class="sidebarIcon" valign="middle"><a class="sidebarLink" href="list.jsp"><img src="/images/sidebar/residents.png" width="28" height="28" border="0" hspace="0" vspace="0"/></a></td>
                     <td class="sidebarLabel" valign="middle"><a class="sidebarLink" href="list.jsp">The List</a></td>
                  </tr>
               </table>
            </li>
         </ul>
      </td>
   </tr>
</table>

主侧边栏是应用程序的主要右侧导航。目前，由于 jQuery 和 CSS，当鼠标悬停在列表项中的一个表格上时，整个表格的样式都会发生变化。

当使用 Tab 键在侧边栏中导航时，问题就出现了。当前焦点转到最内层表中的每个 href。期望的效果是表格本身获得键盘焦点，以便它可以提供与鼠标悬停时看到的相同颜色变化，并允许键与单击任一链接相同。

这是怎么做到的？

Answer 1

您可以通过向其添加 tabindex 使表格可聚焦。

这适用于 Chrome、Firefox、Opera 和 Safari。

要使其在 IE 中工作，您可以添加一点 jQuery:

$('td,th').on('focus',
  function() {
    $(this).closest('table').focus()
  }
)

示例: http://jsfiddle.net/5fagh2tf/10/