管理焦点到HTML表

Manage Focus to HTML table

本文关键字：HTML 焦点 管理      更新时间：2023-09-26

以下代码是侧边栏中的一个选定项目：

<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>

mainsidebar是应用程序的主要右侧导航。由于jQuery&CSS，整个表的样式发生了变化。

使用tab键浏览此侧栏时会出现问题。目前，重点放在最内部表中的每个href上。所需的效果是让表格本身获得键盘焦点，这样它就可以给出与鼠标悬停时相同的颜色变化，并允许键与单击任一链接相同。

这是怎么做到的？

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

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

为了让它在IE中工作，你可以添加一个小jQuery:

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

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

相关文章：