Question

您好我已经创建了一个基本的jquery carousal。我需要使用tab来访问它，以便它遵循Prev tab，casousal dots，next tab等序列。

<div id="mainDiv">
    <div id="buttons">
    <a href="#" id="prev" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; left : 300px;">&lt;</a>
    <a href="#" id="next" style="font-size: 60px; font-weight : bold; text-decoration : none; position: absolute; top: 250px; right: 250px;">&gt;</a>
</div>

<div   onclick ="changeContent()" id="sliderDiv">
    <ul tabindex="1" class="slider">
      <li>
        <h3>Image 1</h3>
        <img src="images/1.jpg" alt="Image not found">
      </li>
      <li>
        <h3>Image 2</h3>
        <img src="images/2.jpg" alt="Image not found"> 
      </li>
      <li>
        <h3>Image 3</h3>
        <img src="images/3.jpg" alt="Image not found"> 
      </li>
      <li>
        <h3>Image 4</h3>
        <img src="images/4.jpg" alt="Image not found">
      </li>
      <li>
         <h3>Iframe</h3>
         <iframe src="testIframe.html"></iframe>
      </li>
    </ul>
</div>
<br>
<br>
<br>
<div class="carousalDots">
    <span class="slickdot" onclick ="changeContent()"></span>
    <span class="slickdot" onclick ="changeContent()"></span>
    <span class="slickdot" onclick ="changeContent()"></span>
    <span class="slickdot" onclick ="changeContent()"></span>
    <span class="slickdot" onclick ="changeContent()"></span>
</div>

我尝试使用tabindex属性，但它没有用。任何帮助将不胜感激：）

Answer 1

您的代码存在一些问题。首先，“＆tab”标签中唯一可用的项目是两个标签，并且具有tabindex集。如果您希望旋转木马点可以聚焦，您应该尝试将它们变成更合适的可聚焦元素。类似的东西：

<a href="#" class="slickdot" role="button" onclick ="changeContent()"></a>

这将允许通过tab键访问点，并提供预期的悬停光标状态。

关于序列的下一个评论＆＃34; Prev标签，casousal dots，next tab＆＃34;，我建议重新设计你的标记以允许该流程自然发生。将焦点顺序劫持远离用户通常是不好的做法。如果您可以将旋转木马点移动到与上一个/下一个按钮相同的div中，那么它是理想的。这样，用户可以更轻松地导航到控件，并且更易于维护。

需要使用标签访问我的jquery carousal

1 个答案: