javascript - 基本 jquery 步骤向导

Question

尝试这样做已经有一段时间了，但似乎所有 jquery 步骤/向导插件都非常有限，希望你们能帮我一点忙。

我正在尝试做的是一个非常基本的 3 步向导，通过 jQuery。所以一开始它只显示 .step-active 和 .content-active ，然后是 2 和 3 我提交表单的地方。

这是我的 HTML:

<div class="steps-wizard">
<div class="step1 step-active">1</div>
<div class="step2">2</div>
<div class="step3">3</div>
</div>

<form id="steps-form">
<div class="steps-content">
<!-- STEP 1 -->
<div class="step1-content content-active">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 2 -->
<div class="step2-content">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 3 -->
<div class="step3-content">
    -- CONTENT --
    <input type="submit">Submit</a>
</div>

非常感谢对此的任何帮助，因为我似乎无法使其正常工作......

谢谢大家!

Answer 1

是的，它适用于许多向导插件，但不适用于 jQuery Steps。 jQuery Steps 是一个非常强大且功能丰富的向导插件。您可以使用大量 CSS 类来自定义您想要的控件。每个步骤都包含一个步骤按钮、一个步骤标题(默认隐藏)和一个内容步骤面板。在您的情况下，您只需覆盖两个 CSS 类(请参阅以下 CSS 片段)。

/* First hide all steps from the begining on */
.wizard > .steps li
{
    display: none;
}

/* Then just re-show only the current step */
.wizard > .steps li.current
{
    display: block;
}

您找到的正在运行的演示 here .

有关更多信息和示例，请转到 here .

要获得更高级的表单向导实现，请转到 here .您将在那里学习如何将 jQuery Steps 和 jQuery Validation 结合在一起。