javascript - 使用 jQuery 的花式滑动表单

Question

我正在使用来自 codrops 的代码它工作正常，但是当我删除段落

并添加一个包含输入但没有 <"p"> 的表时，我遇到了问题。 问题如下: 当您使用 TAB 按钮从幻灯片中的最后一个输入移出以移动到下一张幻灯片中的下一个选定输入文本时，下一张幻灯片将被取消组织!

这是没有问题的代码示例:

<fieldset class="step">
    <legend>Account</legend>
    <p>
        <label for="username">User name</label>
        <input id="username" name="username" />
    </p>
    <p>
        <label for="email">Email</label>
        <input id="email" name="email" placeholder="info@tympanus.net"
        type="email" AUTOCOMPLETE=OFF />
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password" AUTOCOMPLETE=OFF
        />
    </p>
</fieldset>

这是有问题的代码示例:

<table width="100%" border="0">
    <tr>
        <td>
            <label for="username">User name</label>
        </td>
        <td>
            <input name="username" id="username" tabindex="1" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="email">Email</label>
        </td>
        <td>
            <input name="email" type="email" id="email" placeholder="info@tympanus.net"
            tabindex="2" AUTOCOMPLETE=OFF />
        </td>
    </tr>
    <tr>
        <td>
            <label for="password">Password</label>
        </td>
        <td>
            <input name="password" type="password" id="password" tabindex="3" AUTOCOMPLETE=OFF
            />
        </td>
    </tr>
</table>
<p>&nbsp;</p>

如果不添加最后一行，代码可以工作，但 TAB 不会，它将直接跳到下一张幻灯片，而无需选择同一张幻灯片中的输入。

我如何通过在选项卡式表单之间移动来解决此问题，使用 TAB 按钮没有任何问题。

Answer 1

我只是简单地浏览了 codrops 网站，但在我看来你错过了 <fieldset class="step"> ... </fieldset>每组输入字段必须包含的标签。尝试放置您的表格 - 我想必须有多个，否则您为什么要使用 fancysliding？ - 在这些标签内。