如何逐个导航不同的列表项以在该项

Question

我正在开发智能电视应用程序。我在列表项上添加导航时遇到了麻烦。列表项包含

<div class="work">
  <img alt="" src="./images/img_title_work.png" class="title" />
  <ul>
    <li>
      <img alt="" src="./images/1_1.png" class="title" />
      <label>What is killer contents?
        <p>2012.06</p>
      </label>
    </li>
    <li>
      <img alt="" src="./images/1_2.png" class="title" />
      <label>Handmade application
        <p>2012.05</p>
      </label>
    </li>
  </ul>
</div>

我希望每当用户从遥控器按下右侧导航按钮时，焦点类被添加到下一个项目并从第一个项目中删除。类似地，如果用户再次按下右侧，则应将焦点类添加到第三项。和左侧导航的类似情况。这个项目是在html css js。感谢